'module.exports = {};' 的等价物如何？在 es6 中用于 postcss.config.js？答案

【问题标题】：How is the equivalent of 'module.exports = {};' in es6 for postcss.config.js?'module.exports = {};' 的等价物如何？在 es6 中用于 postcss.config.js？
【发布时间】：2017-09-13 16:08:14
【问题描述】：

我在 webapck2 中使用 postcss 加载程序。加载程序需要一个配置文件postcss.config.js。我不需要任何选择。此问题评论 (https://github.com/akveo/ng2-admin/issues/604#issuecomment-271974780) 建议我可以简单地将其放入 postcss.config.js

module.exports = {};

但是，当我运行 webpack (webpack -p --config webpack.config.js) 时，我收到了这些错误消息

ERROR in ./~/postcss-loader!./~/css-loader?{"modules":true}!./~/less-loader!./app/scripts/components/forms/form.less
Module build failed: Unknown word (1:1)

> 1 | exports = module.exports = require("../../../../node_modules/css-loader/lib/css-base.js")();
    | ^
  2 | // imports
  3 |

我认为这是因为我的 babel 加载器也适用于所有带有.js 扩展名的文件，而module.exports = {}; 可能没有被babel 很好地翻译。

在 es6 中定义空模块导出的正确语法是什么？

如果我只是注释掉该行，我会得到同样的错误。

如果我将文件留空，则 postcss 会抱怨缺少配置文件：

ERROR in ./~/postcss-loader!./~/css-loader?{"modules":true}!./~/less-loader!./app/scripts/components/forms/form.less
Module build failed: Error: No PostCSS Config found in: /Users/antkong/dev/project/app/scripts/components/forms
    at Error (native)
    at /Users/antkong/dev/project/node_modules/postcss-load-config/index.js:51:26

我正在使用 postcss-loader 1.1.0 和 webpack 2.3.3

【问题讨论】：

export default {}; ?
我收到了这个Module build failed: SyntaxError: Unexpected token export
嗯，这就是您在“如何等效于 'module.exports = {};'在 es6 中？” :shrug: 你在那里做什么并不明显。
好吧，问题文本提供了上下文
我在没有postcss.config.js 的情况下运行postcss-loader，我不需要任何肮脏的黑客攻击。

标签： webpack ecmascript-6 webpack-2 postcss

【解决方案1】：

问题不在于配置，除非您先转译配置，否则您将无法使用 ES 模块。

您在css-loader 之后应用postcss-loader，这会生成JavaScript，这不是有效的CSS，但这正是postcss-loader 所期望的。 postcss-loader 应该在 css-loader 和 less-loader 之间。

您的.less 规则如下所示：

{
  test: /\.less$/,
  use: [
    'style-loader',
    {
      loader: 'css-loader',
      options: {
        modules: true
      }
    },
    'postcss-loader',
    'less-loader'
  ]
}

或者，如果您使用的是extract-text-webpack-plugin：

{
  test: /\.less$/,
  use: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: [
      {
        loader: 'css-loader',
        options: {
          modules: true
        }
      },
      'postcss-loader',
      'less-loader'
    ]
  })
}

【讨论】：