postcss-loader配合autoprefixer给css加浏览器前缀名

1. 安装

npm i postcss-loader autoprefixer -D

2. 在webpack.config.js 中配置

3.查看index.html 中 引入的 "dest/bundle.js"(webpack 输出地址)中引入的index.css文件(使用的是require("../css/index.css"))

4.此时在文件根目录的命令行中输入 webpack 此时的transform是没有浏览器前缀的

5.解决上面没有出来浏览器前缀的方式有两个

第一个: 增加一个.browserslistrc文件

我们还需要增加一个.browserslistrc文件,此文件里面的内容为

last 5 version  ==>  落后最新浏览器版本的5个版本之内

> 1%   ==> 支持市场使用率>1%的浏览器

此时查看结果

第二个: 在packjson.js 中新增一个配置项, "browserslist", 里面就是浏览器前缀的限制