webpack4:css样式自动添加前缀

css3中新增的样式可能还存在兼容性问题 这个时候就需要我们添加浏览器内核的前缀
我们可以使用webpack自动帮我们添加 前缀
需要安装俩个 插件
cnpm i postcss-loader autoprefixer -D

// 在 webpack.config.js中
{
    test:/\.css$/,// css-loader解析css语言　style-loader将其解析到浏览器上
     use:[{
         loader:'style-loader',
         options:{    // 配置 单个模块之间的规则
             insert:'head',   // 插入到html文件 的head 顶部 用户自定义的可以覆盖书写的样式
         }
     },'css-loader','postcss-loader'] // 这里注意了 要写在 css-loader前面　
 }, 

然后就是在 目录下 新建一个 postcss的配置文件 postcss.config.js

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

到这里 还不行 你只是引入了 加前缀的插件 但并没有指明什么条件下 加前缀 还需要一个条件的文件
在当面目录下新建立一个 .browserlistsrc 文件

> 1%       //  浏览器的市场占有 得超过 百分之1
last 2 versions   // 浏览器的最后俩个版本

这样使用 npm run build mode:‘production’ 　　// 生产模式下
查看生成的 css代码
确实帮我们添加上了 表示成功了