Webpack 错误 : configuration has an unknown property 'postcss'

Question

升级到最新版本的 webpack 后，我看到了这个错误:

WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration has an unknown property 'postcss'. These properties are valid:
object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry, externals?, loader?, module?, name?, node?, output?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, stats?, target?, watch?, watchOptions? }
For typos: please correct them.
For loader options: webpack 2 no longer allows custom properties in configuration.
Loaders should be updated to allow passing options via loader options in module.rules.

这是我的 webpack 配置，显示了 postcss 模块:

module: {
loaders: [
// JavaScript / ES6
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.jsx?$/,
include: path.resolve(__dirname, '../src/components'),
exclude: /node_modules/,
loader: 'babel-loader'
},
// Sass
{
test: /\.scss$/,
include: path.resolve(__dirname, '../src/sass'),
exclude: /node_modules/,
loader: 'style!css!postcss!sass'
},
// CSS
{
test: /\.css$/,
loader: 'style!css!postcss'
},
// JSON
{
test: /\.json$/,
exclude: /node_modules/,
loader: 'json-loader'
},
// Images
// Inline base64 URLs for <=8k images, direct URLs for the rest
{
test: /\.(png|jpg|jpeg|gif|svg)$/,
loader: 'url',
include: [
path.resolve(__dirname, '../public'),
path.resolve(__dirname, '../src/sass')
],
exclude: /node_modules/,
query: {
limit: 8192,
name: 'images/[name].[ext]?[hash]'
}
},
// Fonts
{
test: /\.(woff|woff2|ttf|eot)(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url',
include: path.resolve(__dirname, '../src/sass'),
exclude: /node_modules/,
query: {
limit: 8192,
name: 'fonts/[name].[ext]?[hash]'
}
}
]
},
postcss: function() {
return [
autoprefixer({
browsers: ['last 2 versions']
})
];
}


Answer 1

修复方法是确保文件顶部包含自动前缀，然后移动 postcss 到插件部分:

const autoprefixer = require('autoprefixer');

plugins: [
  // Shared code
  new webpack.optimize.OccurrenceOrderPlugin(),
  new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',
    filename: 'vendor.bundle.js',
    minChunks: Infinity
  }),
  new webpack.LoaderOptionsPlugin({
    options: {
      context: __dirname,
      postcss: [
        autoprefixer
      ]
    }
  })
]