Ошибка Webpack: конфигурация имеет неизвестное свойство «postcss»

После обновления до последней версии веб-пакета я вижу эту ошибку:

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.

Вот моя конфигурация веб-пакета, показывающая модуль 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'] }) ]; }


person James Gentes    schedule 01.12.2016    source источник


Ответы (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
      ]
    }
  })
]
person James Gentes    schedule 01.12.2016
comment
Итак, являются ли OccurrenceOrderPlugin и CommonsChunkPlugin неотъемлемой частью решения, или ваш комментарий к общему коду, возможно, предназначен для того, чтобы предположить, что они не имеют отношения к этому? - person sferencik; 19.08.2019
comment
Эти другие плагины не требуются для работы автопрефиксера, извините за путаницу. - person James Gentes; 04.09.2019