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使用手册