webpack打包css文件-postcss-自动增加前缀

什么是PostCss
链接地址
postcss和less sass不同，他不是css预处理器，PostCSS是一款使用插件去转换CSS的工具。
它常用的插件就是autoprefixer（自动补全浏览器前缀），postcss-pxtorem(自动把px专转化为rem)

1 . 安装postcss-loader

npm i -D postcss-loader

2 .安装需要使用的插件

npm i -D autoprefixer

3. 配置postcss-loader

在css-loader style-loader前添加postcss-loader

4. 创建postcss.config.js文件

在文件中配置

module.exports = {
    plugins: {
        "autoprefixer": {
            "overrideBrowserslist": [
                 "ie >= 8", // 兼容IE7以上浏览器
                 "Firefox >= 3.5", // 兼容火狐版本号大于3.5浏览器
                 "chrome  >= 35", // 兼容谷歌版本号大于35浏览器,
                 "opera >= 11.5" // 兼容欧朋版本号大于11.5浏览器,
            ]
        }
    }
};

当然，css文件要引入js文件中才可以，下面是文件顺序，以及如何引入

image.png

js文件引入css文件

image.png