介绍
本期给大家在webpack5中如何配置css用到的解析和插件的使用，更准确的说是PostCSS的插件。众所周知，现在大部分前端项目都在使用webpack做打包，打包做解析的比较重要目的一个是给js做转化，比如es6转es5，混淆压缩等。然后就是对css进行解析，比如说scss转css，less转css，前缀自动补全，还有移动端项目px转rem或者px转vw。今天我们就介绍将后者其中的前缀自动补全，px转rem，px转vw，这都是在PostCSS中极为常用的插件。
我们可以看到上图案例，div中的样式，转换成了rem作为单位，并且加了兼容前缀，下来就来讲述怎么实现的。
正文
1. autoprefixer
它是一个自动给css追加前缀的插件，在前端里是最为常用的一个插件，在次之前，可以尝试一下他的效果——官网。
安装：
代码语言：javascript复制yarn add -D postcss autoprefixer
// 或者
npm install postcss autoprefixer --save-dev
复制代码接下来，我们要在postcss-loader里配置插件，注意webpack5这个插件要配置到postcssOptions里，如下代码块：
代码语言：javascript复制module.exports = {
// ...
module: {
rules: [
// ...
{
test: /.css$/i,
use: ["style-loader",
{
loader: "css-loader"
},
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
require('autoprefixer')({
"overrideBrowserslist": [
"> 1%",
"last 7 versions",
"not ie <= 8",
"ios >= 8",
"android >= 4.0"
]
})
]
}
}
}
]
}
],
}
// ...
}
复制代码我们可以直接使用，也可以配置其Browserslist，也就是浏览器列表的版本，可以自行按需求修改当前要支持到的版本。
2. postcss-pxtorem
它是一个编译时将css中px单位转化为rem的插件，在移动端开发时也是最为常用的一个插件。
代码语言：javascript复制yarn add -D postcss postcss-pxtorem
// 或者
npm install postcss postcss-pxtorem --save-dev
复制代码接下来，我们要在postcss-loader里配置该插件，如下代码块：
代码语言：javascript复制module.exports = {
// ...
module: {
rules: [
// ...
{
test: /.css$/i,
use: ["style-loader",
{
loader: "css-loader"
},
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
require('postcss-pxtorem')({
rootValue: 100,
selectorBlackList: [".vux-", ".weui-", ".mt-", ".mint-", ".dp-", ".ig-"]
})
]
}
}
}
]
}
],
}
// ...
}
复制代码我们常用的配置一般是：
- rootValue：代表根元素的字体大小。
- selectorBlackList：要忽略并保留为 px 的选择器的前缀标识数组，比如很多第三方组件库或者模板不需要你去再转化了，有可能破坏第三方原始样式，就是这个就非常常用的配置项了。
- propList：可以让css属性px转化为rem的数组，默认是['*']，也是全部属性都可以，当然可以配置不转化的属性，下面将不转换字体间的间距为例： ['*', '!letter-spacing'] 复制代码
- minPixelValue：设置要替换的最小像素值。
- exclude：要忽略并保留为 px 的文件路径，正则表达式或者函数都可以传。
当然我们如果要实现rem还是要用一个rem库引入到项目中——amfe-flexible.js
安装amfe-flexible.js:
代码语言：javascript复制yarn add amfe-flexible
// 或者
npm install amfe-flexible -S
复制代码import "amfe-flexible"
import "../assets/style.css"
复制代码我们这样使用就可以根据视口改变根节点字体大小，从而变成自适应的网页。
3. postcss-px-to-viewport
它是一个编译时将css中px单位转化为vw、vh、vmin、vmax的插件，在移动端开发时也是最为常用的一个插件。
而且项目开发时，可以不需要引入其他的库文件，就可以直接使用。但没中不足的时，国内很多低端机对vw这类单位并不理想，兼容更全面的话可以选择上面的rem。
代码语言：javascript复制yarn add -D postcss postcss-px-to-viewport
// 或者
npm install postcss postcss-px-to-viewport --save-dev
复制代码接下来，我们要在postcss-loader里配置该插件，如下代码块：
代码语言：javascript复制module.exports = {
// ...
module: {
rules: [
// ...
{
test: /.css$/i,
use: ["style-loader",
{
loader: "css-loader"
},
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
require("postcss-px-to-viewport")({
unitToConvert: "px", // 需要转换的单位，默认为"px"
viewportWidth: 750, // 视窗的宽度，对应移动端设计稿的宽度
// viewportHeight:667,// 视窗的高度，对应的是我们设计稿的高度
unitPrecision: 3, // 单位转换后保留的精度
propList: [ // 能转化为vw的属性列表
"*"
],
viewportUnit: "vw", // 希望使用的视口单位
fontViewportUnit: "vw", // 字体使用的视口单位
selectorBlackList: [], // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。
minPixelValue: 1, // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
mediaQuery: false, // 媒体查询里的单位是否需要转换单位
replace: true, // 是否直接更换属性值，而不添加备用属性
exclude: /(/|\)(node_modules)(/|\)/, // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
})
]
}
}
}
]
}
],
}
// ...
}
复制代码我们常用的配置见注释，大致与pxtorem相似。可以对比着去了解。
结语
我们本期介绍完了三个webpack5中postcss的插件，相信如果自己搭建脚手架使用了这些会对你的前端开发效率会有极大提升。
