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

）