Webpack5里好用的插件（—）

玖柒的小窝

修改于 2021-10-09 14:16:50

1K0

修改于 2021-10-09 14:16:50

介绍

本期给大家在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追加前缀的插件，在前端里是最为常用的一个插件，在次之前，可以尝试一下他的效果——官网。

安装：

yarn add -D postcss autoprefixer
// 或者
npm install postcss autoprefixer --save-dev
复制代码

接下来，我们要在postcss-loader里配置插件，注意webpack5这个插件要配置到postcssOptions里，如下代码块：

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的插件，在移动端开发时也是最为常用的一个插件。

yarn add -D postcss postcss-pxtorem
// 或者
npm install postcss postcss-pxtorem --save-dev
复制代码

接下来，我们要在postcss-loader里配置该插件，如下代码块：

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:

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。

yarn add -D postcss postcss-px-to-viewport
// 或者
npm install postcss postcss-px-to-viewport --save-dev
复制代码

接下来，我们要在postcss-loader里配置该插件，如下代码块：

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相似。可以对比着去了解。