处理css兼容性

:::info 💡 通常css为了兼容各个浏览器，不得已会添加样式前缀，如兼容低版本chrome需加前缀-webkit-，浏览器之多兼容起来极为麻烦，并且还有可能遗漏某些兼容，导致未知的问题潜伏，所以可以通过webpack统一，标准的帮我们做这些工作。 :::

问题1：怎么设定需要兼容那些浏览器呢？

比如有一个项目要求兼容IE8，要怎么去设置让webpack来知道css要兼容到IE8。

1.caniuse.com

这里就要用到一个网站：caniuse.com ，在该网站找到 Browser usage table 进入，就可以看到各大浏览器所占市场份额。

通过该网站可以看到IE8的市场占有率为0.04%，chrome98市场占有率为15.53%。

2.不要担心这是某个野鸡网站，webpack兼容浏览器的标准就是从这里获得的。

在我们安装webpack之后，会自动安装一个browserslist，可以在项目的node_modules/browserslist/index.js找到关联caniuse网站的相关内容。下面在进行一下测试。

3.知道我们要兼容的浏览器所占市场份额之后，开始配置要兼容的浏览器

Browserslist的配置可以写在package.json的browserslist字段里也可以写在browserslistrc文件里。
package.json示例：

{
+ "browserslist": [
+   "> 1%",//大于1%市场份额的浏览器
+   "last 2 versions"//最新的2个chrome版本
+   "not dead"//没有死掉的 24个月不更新为死掉的
+ ]
}

browserslistrc文件示例：

webpacktest
  |- /node_modules
  |- /src
    |- index.js
+ |- .browserslistrc
  |- package-lock.json
  |- package.json
  |- webpack.config.js

+ > 1%    //大于1%市场份额的浏览器
+ last 2 versions    //最新的2个chrome版本
+ not dead    //没有死掉的 24个月不更新为死掉的

配置文件内容说明

注意：.browserslistrc文件和package.json中browserslist的两者不可同时存在，报错信息：

4.测试一下

npx browserslist

NPX
结果为：

结果有点多，让我们修改一下.browserslistrc文件或者pakeage.json中的配置，以.browserslistrc文件举例。

- > 1%
- last 2
- not dead
+ last 2 chrome versions

npx browserslist

浏览器返回数量减少，只有chrome最新的两个版本，测试没问题，这样我们就可以按需要去兼容你想兼容的浏览器了。

问题2：设定要兼容那些浏览器之后，webpack要怎么去做配置。

:::info 当设置好要兼容那些浏览器之后，让webpack开始做兼容工作
webpack处理兼容用到了postcss-loader,其内部使用到了postcss，postcss-preset-env是postcss常用功能性的集合。 :::

1.下载

npm install postcss-loader postcss postcss-preset-env --save-dev

2.配置

const path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'index.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
+         {
+           loader: 'postcss-loader',
+           options: {
+             postcssOptions: {
+               plugins:[
+                 require('postcss-preset-env')
+               ]
+             }
+           }
+         }
        ]
      },
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
+         {
+           loader: 'postcss-loader',
+           options: {
+             postcssOptions: {
+               plugins:[
+                 require('postcss-preset-env')
+               ]
+             }
+           }
+         },
          'less-loader'
        ]
      }
    ]
  }
};

注意点：
1.postcss-loader处理的是css文件，如果使用到了css预编译器，less举例，应在less-loader将.less文件处理成.css文件之后，在执行postcss-loader，代码书写顺序如上。
2.css文件中使用到@import时候，被引入的文件没有经过postcss-loader处理，这时候可以给css-loader设置importLoader：1 表示希望在css-loader编译时遇到 @import 语法时，将会往后退几个loader重新处理，这里表示一个也就是要经过postcss-loader的处理

const path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'index.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
-         'css-loader',
+                    {
+                        loader: 'css-loader',
+                        importLoader: 1
+         },
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins:[
                  require('postcss-preset-env')
                ]
              }
            }
          }
        ]
      },
      {
        test: /\.less$/,
        use: [
          'style-loader',
-         'css-loader',
+                    {
+                        loader: 'css-loader',
+                        importLoader: 1
+         },
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins:[
                  require('postcss-preset-env')
                ]
             }
            }
          },
          'less-loader'
        ]
      }
    ]
  }
};

3.打包

npm run build

4.查看

在浏览器中打开引用打包后js文件的html，打开控制台，在element的head中找到style-loader添加的style。

如果没有出现兼容的css样式，请在.browserslist中降低要兼容的浏览器版本。

- > 1%
+ > 0.001%

5.优化

:::tips 可以看到第二步 ‘配置’ 添加两个相同的代码块，事实上我们可以封装起来，使用PostCSS 本身的 配置文件。postcss.config.js :::

webpacktest
  |- /node_modules
  |- /src
    |- index.js
  |- .browserslistrc
  |- package-lock.json
  |- package.json
+ |- postcss.config.js
  |- webpack.config.js

+ module.exports = {
+   plugins: [
+     [
+       'postcss-preset-env',
+       {
+         // 其他选项
+       },
+     ],
+   ],
+ };

有了postcss.config.js文件，我们去优化原有的webpack.config.js

const path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'index.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
-         {
-           loader: 'postcss-loader',
-           options: {
-             postcssOptions: {
-               plugins:[
-                 require('postcss-preset-env')
-               ]
-             }
-           }
-         }
+                    'postcss-loader'
        ]
      },
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
-         {
-           loader: 'postcss-loader',
-           options: {
-             postcssOptions: {
-               plugins:[
-                 require('postcss-preset-env')
-               ]
-             }
-           }
-         },
+                    'postcss-loader'
          'less-loader'
        ]
      }
    ]
  }
};

Loader 将会在打包时自动搜索postcss.config.js配置文件。
ok，postcss的公共配置文件就设置好了。再次打包。

扩展

也可以通过webpack.config.js中的target来设置打包后的最终运行环境

文档：
target概念：https://webpack.docschina.org/concepts/targets/
target选项：https://webpack.docschina.org/configuration/target#browserslist