webpack5（二）浏览器兼容处理-CSS-一一网

在webpack中通过工程化处理兼容问题，例如对css处理的postcss，对js处理的babel等等工具，这些工具又依赖于browserslist收集的浏览器信息

browserslist

用于在不同前端工具之间共享目标浏览器和 Node.js 版本的配置文件

在各大框架中脚手架默认帮我们配置了browserslist，以下是vue的默认配置

> 1%   // 市场占有率大于1%
last 2 versions // 最后两个版本（最新的两个大版本）
not dead  // 浏览器24个月内有官方支持或更新
复制代码

以上查询是并集结果查询，还可以指定浏览器查询，交集查询等。具体使用可查阅官网。
条件查询依赖的是caniuse-lite工具，这个工具的数据来自于caniuse网站上。

1. 配置

方式一

.browserslistrc

>1%
last 2 version
not dead
复制代码

方式二

package.json

"browserslist": [
    "> 1%",
    "last 2 version",
    "not dead"
  ]
复制代码

方式三

根据环境变量配置不同的条件，具体查阅官网

2. 命令行查询

npx browserslist
复制代码

postcss

PostCSS 接收一个 CSS 文件并提供了一个 API 来分析、修改它的规则（通过把 CSS 规则转换成一个抽象语法树的方式）。在这之后，这个 API 便可被许多插件利用来做有用的事情，比如寻错或自动添加 CSS vendor 前缀。

autoprefixer

为css添加浏览器内核前缀

下载

npm i postcss-loader autoprefixer -D
复制代码

使用

webpack.config.js

  module: {
    // 模块配置
    rules: [
      // 规则 对模块(module)应用 loader，或者修改解析器(parser)
      {
        test: /\.css$/, // 正则匹配
        use: ['style-loader', 'css-loader', 'postcss-loader'] // 官网：Loaders 可以通过传入多个 loaders 以达到链式调用的效果，它们会从右到左被应用（从最后到最先配置）
      },
      {
        test: /\.less$/, // less 解析配置
        use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader']
      }
    ]
  }
复制代码

postcss.config.js

module.exports = {
  plugins: [
    'autoprefixer'
  ]
}
复制代码

编译后结果

postcss-preset-env

不但可以自动添加前缀，还能帮助转换新特性

使用方式同上，先下载后配置。效果如下

.content {
  color: red;
}

:fullscreen {
} 
.content {
  color: #12345678;
  user-select: none;
  transition: all 3s ease;
}
复制代码

问题：当通过css加载其他css时发现postcss-loader不生效了

@import-bug.png

解决：配置options

      {
        test: /\.css$/, // 正则匹配
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1 //设置在 css-loader 前应用的 loader 数量
            }
          },
          'postcss-loader'
        ]
      },
复制代码