javascript - 在 webpack 2.x 中将 autoprefixer 与 postcss 结合使用

Question

如何在 webpack 2.x 中使用 autoprefixer。

以前，它曾经是这样的......

...

module: {
  loaders: [
     {
       test: /\.scss$/,
        loader: 'style!css!sass!postcss'
     }
   ]
},
postcss: () => {
  return [autoprefixer]
},

...

但是，它不再起作用了。

如何重写为webpack@2.x.x？

Answer 1

Webpack 2.x.x 是 killer ，也是构建破坏者

webpack 2.x.x 引入了 webpack.LoaderOptionsPlugin() 插件，您需要在其中定义所有加载器选项插件。例如，autoprefixer 是 postcss-loader 的插件。所以，它必须放在这里。

还有

• module.rules 替换 module.loaders
• 所有加载程序都应该明确表示它们是加载程序。前任。 loader: 'style!css' 应该是 loader: 'style-loader!css-loader'

新配置看起来像这样......

...

module: {
  rules: [
     {
       test: /\.scss$/,
       loaders: ['style-loader', 'css-loader', 'sass-loader', 'postcss-loader']
     }
   ]
},

plugins: [
  new webpack.LoaderOptionsPlugin({
    options: {
      postcss: [
        autoprefixer(),
      ]
     }
  })
],

...

希望对大家有帮助。