postcss-loader有什么用?如何配置webpack让浏览器自动补全前缀？

Postcss 本身是一个功能比较单一的工具。它提供了一种方式用 JavaScript 代码来处理 css。它负责把 CSS 代码解析成抽象语法树结构（Abstract Syntax Tree，AST），再交由插件来进行处理。插件基于CSS 代码的 AST 所能进行的操作是多种多样的，比如可以支持变量和混入（mixin），增加浏览器相关的声明前缀，或是把使用将来的 CSS 规范的样式规则转译（transpile）成当前的 CSS 规范支持的格式。从这个角度来说，PostCSS 的强大之处在于其不断发展的插件体系。

在webpack4. 的配置里面，切记版本不同，postcss-loader的配置会有相应的变化。我们要使用浏览器自动补全工具首先要安装 postcss-loader并配合autoprefixer插件。

（1）首先将两个必要插件安装到本地依赖。

npm i postcss-loader autoprefixer -D

(2) 在 webpack 中配置 module，

module：{


test: /\.less$/, use: [


'style-loader'


'css-loader',


'postcss-loader',


'less-loader',


     ]


}

豌豆资源搜索网站https://55wd.com 电脑刺绣绣花厂 ttp://www.szhdn.com

(3) 创建 postcss.config.js文件

module.exports = {


plugins: [


require('autoprefixer')({


overrideBrowserslist: [


"Android 4.1",


"iOS 7.1",


"Chrome > 31",


"ff > 31",


"ie >= 8",


"> 1%", // 必须大于 1% 用户使用的浏览器


              //'last 2 versions', // 所有主流浏览器最近的 2个版本


          ],


          grid: true


        })


    ]


}

当然还有另外一种配置 postcss-loader 的方式，在 package.json 文件加：

"browserslist": [


"defaults",


"not ie < 11",


"last 2 versions",


"> 1%",


"iOS 7",


"last 3 iOS versions"


],

然后 创建 postcss.config.js

module.exports = {


plugins: [


require('autoprefixer')()


    ]


}

相信到这里你就会使用 浏览器自动补全工具啦