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')], }}},...]
}

）