postcss-loader的autoprefixer插件不起作用

webpack.config.js文件的配置如下:

{
    test: /\.s[ac]ss$/,
    exclude: /node_modules/,
    use: [
      MiniCssExtractPlugin.loader,
      {
        loader: 'css-loader',
        options: {
          importLoaders: 2, // 在这之前还需加载几个loader
        },
      },
      'postcss-loader',
      'sass-loader',
    ],
 }

注意这几个loader的顺序，importLoaders表示在这个loader之前还需要加载多少个loader。默认为0，所以需要配置上。

安装autoprefixer插件，在postcss.config.js加上如下代码：

module.exports = {
  plugins: [require('autoprefixer')],
};

最后一步，在package.json中配置配置browerslist：

"browserslist": [
  "iOS >= 6",
  "Android >= 4",
  "IE >= 9"
 ]

大功告成，去试一下打包吧!