我在我的webpack配置中无法设置Autoprefixer

Question

我尝试复制许多Webpack设置，但似乎无法使postcss-loader Autoprefixer正常工作。我在项目中大量使用了Flexbox，我真的想让webpack在yarn构建时为旧版浏览器添加前缀。现在，SCSS已编译为CSS，但未添加任何前缀。这是我的webpack配置当前的样子：

webpack.js

  const webpack = require('webpack');
const merge = require('webpack-merge');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
var autoprefixer = require('autoprefixer');
const baseConfig = require('./base.config.js');

module.exports = merge(baseConfig, {
	output: {
		filename: 'app.bundle.min.js',
		path: path.join(__dirname, '../../assets')
	},

	module: {
		rules: [
			{
				test: /\.(scss|css)$/,
				use: ExtractTextPlugin.extract({
					fallback: 'style-loader',
					use: [
						{
							loader: 'css-loader',
							options: { sourceMap: true, minimize: true }
						},
						{
							loader: 'postcss-loader',
							options: {
								ident: 'postcss',
								plugins: [require('autoprefixer')]
							}
						},
						{
							loader: 'sass-loader',
							options: { sourceMap: true, minimize: true }
						}
					],
					fallback: 'style-loader'
				})
			}
		]
	},

	plugins: [
		new ExtractTextPlugin('app.bundle.min.css'),

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

		// Minimize JS
		new UglifyJsPlugin({ sourceMap: true, compress: true })

		// Minify CSS
		/*new webpack.LoaderOptionsPlugin({
      minimize: true,
    }),*/
	]
});

Answer 1

我相信您需要调用其构造函数，即require('autoprefixer')()

我在PostCss Loader README中看到了这一点。

{
  test: /\.css$/,
  use: [
    'style-loader',
    'css-loader',
    {
      loader: 'postcss-loader',
      options: {
        ident: 'postcss',
        plugins: [
          require('autoprefixer')({...options}), // calls constructor with optional options
          ...,
        ]
      }
    }
  ]
}