webpack4.0 使用 postcss-loader 的 autoprefixer无效，并没有自动添加前缀

参考 webpack官网 配置

1. 安装

npm i -D postcss-loader

再安装 autoprefixer 

npm install autoprefixer -D

2. 新建postcss.config.js文件（与package.json同级）

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

3. webpack.config.js 中

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

 按照以上步骤操作之后，发现并没有自动补充前缀，

后多方查询发现，还需要在 package.json中设置 browserslist，与 "devDependencies" 同级

"browserslist": [
    "last 2 versions",
    "> 1%",
    "iOS 7",
    "last 3 iOS versions"
  ]

这样重新打包，即可自动添加前缀。

（另一种设置：

上边第 2 步不用新建postcss.config.js, 而是直接在第 3.webpack.config.js 中进行设置

module: {
        rules: [{
                test: /\.scss$/,
                // 注意修改下边设置
                use: ['style-loader', 'css-loader', 'sass-loader', 
                {
                    loader: 'postcss-loader',
                    options:{
                        plugins: [require('autoprefixer')], 
 
                    }
                }
            },
            ...
        ]
}

）