webpck4.x autoprofixer失效的問題

安裝 postcss-loader

npm install postcss-loader -D

配置 webpack.config.js

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

postcss.config.js

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

原本到這一步我們覺得應該會出現效果，結果什麼效果都沒有，如下圖：

解決此問題的方法有兩種：
1.在pack.json文件中添加如下代碼

"browserslist": [
    "defaults",
    "not ie < 11",
    "last 2 versions",
    "> 1%",
    "iOS 7",
    "last 3 iOS versions"
]

2.新建一個.browserslistrc文件，然後添加

last 1 version
> 1%
IE 10 # sorry

最後的效果如下：

webpck4.x autoprofixer失效的原因是：
需要指定瀏覽器的範圍。
參考文章如下：

1. browserslist
2. 瀏覽器的兼容性
3. 解決webpack4.x使用autoprefixer 無效
4. browserslist使用手冊