webpack5学习与实战-（十三）-postcss处理css3兼容性前缀

一，概述

postcss是一个用js工具和插件转换css代码的工具。比如说可以使用Autoprefixer插件自动获取浏览器流行度和能够支持的属性，并且根据这些数据帮助我们自动地为css规则添加前缀，将最新的css语法转化成大多数浏览器能够理解的语法。

二，具体的应用

第一步，安装依赖

npm i mini-css-extract-plugin css-loader  postcss-loader -D

这里需要解释一下，mini-css-extract-plugin插件是替换style-loader插件的（都是把css-loader解析后的代码添加到html上，不同的是style-loader直接添加到html上，而mini-css-extract-plugin是采用link资源的方式添加。所以这里直接使用mini-css-extract-plugin）

第二步，在module的rules中配置

 {
        test: /\.(scss|css)$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              // 当前的css所在的文件要相对到dist文件夹
              publicPath: "../../"
            }
          },
          "css-loader",
          "postcss-loader",
          "sass-loader"
        ]
      },

注意这里的use数组中的配置，是有顺序要求的，比如我这里是使用scss预处理器，还安装了sass-loader。
那么写出来的style.scss文件，先是经过sass-loader编译处理成常规的css,然后，再经由postcss-loader添加浏览器兼容前缀。再经过css-loader解析成webpack能够理解的模块。最后经由MiniCssExtractPlugin来通过link链接到index.html上。
写如下的css代码，会发现并没有添加兼容浏览器的 css3前缀，这是因为还需要安装一个插件来实现这一个功能。

第三步，安装autoprefixer

npm i autoprefixer -D

然后再在项目根目录下创建一个文件：postcss.config.js,这个文件是专门用来配置css的插件的。

第四步，配置postcss.config.js

module.exports = () => {
  return {
    plugins: {
      autoprefixer: {
        overrideBrowserslist: [
          "Android 4.1",
          "iOS 7.1",
          "Chrome > 31",
          "ff > 31",
          "ie >= 8"
        ]
      }
    }
  };
};

值得注意的是，浏览器兼容列表可以不写这里，而是配置在package.json文件中。
通常我们这样配置这个postcss.config.js文件：

module.exports = () => {
  return {
    plugins: {
      autoprefixer: {}
    }
  };
};

而会在package.json中配置浏览器兼容：

"browserslist": [
    "> 0.1%",
    "last 2 versions"
  ],

尽量不要用browserslist最好放在.browserslistrc或者package.json内
postcss.config.js内 overrideBrowserslist 的优先级高于 package.json的browserslist，且不能为空，否则会不生效。

于是重启项目，则会看到前缀了：