webpack4.x中使用postcss-loader、autoprefixer给CSS属性自动添加前缀

由于市面上存在几大主流浏览器，当我们在编写CSS相关属性的时候，需要添加兼容各浏览器的前缀，但是这样非常耗时、影响工作效率。

比如编写：

.searchBox{
    display: flex;
}

但我们想要的是这种：

.searchBox{
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
}

那么，接下来有办法解决该问题。

安装

npm install node-sass sass-loader css-loader style-loader postcss-loader autoprefixer -D

配置 webpack.config.js

module.exports = [
    module: {
        rules: [
             {    
                  test: /.(scss|css)$/,    //打包css、sass文件
                  use:[{
                            loader:'css-loader',
                            options: { minimize: false }
                       },
                       {
                            loader:'sass-loader'
                       },
                       'postcss-loader'
                   ]        
              }
         ]
    }
]    

创建 postcss.config.js文件

该文件与webpack.config.js在同一目录下，配置如下：

module.exports = {
     plugins : [
         require('autoprefixer')({
             browsers : ['last 100 versions']      //必须设置支持的浏览器才会自动添加添加浏览器兼容
         })
     ]
 };

好了，基本配置就是这些，之后打包css的时候会自动添加前缀。

如果文章中存在错误的地方，麻烦请大家在评论中指正，以免误人子弟，谢谢！