♠ Webpack配置和css处理

css处理

css-loader的使用

我们创建一个component.js，通过JavaScript创建了一个元素，并且希望给它设置一些样式；

上面的错误信息告诉我们需要一个loader来加载这个css文件，但是loader是什么呢？loader 可以用于对模块的源代码进行转换；我们可以将css文件也看成是一个模块，我们是通过import来加载这个模块的；在加载这个模块时，webpack其实并不知道如何对其进行加载，我们必须制定对应的loader来完成这个功能；

那么我们需要一个什么样的loader呢？对于加载css文件来说，我们需要一个可以读取css文件的loader；这个loader最常用的是css-loader；

npm install css-loader -D

如何使用这个loader来加载css文件呢？有三种方式：

内联方式；
CLI方式（webpack5中不再使用）；
配置方式；

内联方式：

内联方式使用较少，因为不方便管理；

在引入的样式前加上使用的loader，并且使用!分割；

CLI方式

在webpack5的文档中已经没有了--module-bind；实际应用中也比较少使用，因为不方便管理；

配置方式表示的意思是在我们的webpack.config.js文件中写明配置信息：

module.rules中允许我们配置多个loader（因为我们也会继续使用其他的loader，来完成其他文件的加载）；
这种方式可以更好的表示loader的配置，也方便后期的维护，同时也让你对各个Loader有一个全局的概览；

module.rules的配置如下：

rules属性对应的值是一个数组：[Rule]
数组中存放的是一个个的Rule，Rule是一个对象，对象中可以设置多个属性：
- test属性：用于对 resource（资源）进行匹配的，通常会设置成正则表达式；
- use属性：对应的值是一个数组：[UseEntry]
  - UseEntry是一个对象，可以通过对象的属性来设置一些其他属性
    - loader：必须有一个 loader属性，对应的值是一个字符串；
    - options：可选的属性，值是一个字符串或者对象，值会被传入到loader中；
    - query：目前已经使用options来替代；
  - 传递字符串（如：use: [ 'style-loader' ]）是 loader 属性的简写方式（如：use: [ { loader: 'style-loader'} ]）；
- loader属性： Rule.use: [ { loader } ] 的简写。

认识style-loader

我们已经可以通过css-loader来加载css文件了但是你会发现这个css在我们的代码中并没有生效（页面没有效果）。因为css-loader只是负责将.css文件进行解析，并不会将解析之后的css插入到页面中；如果我们希望再完成插入style的操作，那么我们还需要另外一个loader，就是style-loader；

npm install style-loader -D

那么我们应该如何使用style-loader：在配置文件中，添加style-loader；

注意：因为loader的执行顺序是从右向左（或者说从下到上，或者说从后到前的），所以我们需要将styleloader写到css-loader的前面；

查看代码


module: {
    rules: [
      {
        // 规则使用正则表达式
        test: /\.css$/, // 匹配资源
        use: [
          // { loader: "css-loader" },
          // 注意: 编写顺序(从下往上, 从右往做, 从后往前)
          "style-loader",
          {
            loader: "css-loader",
            options: {
              importLoaders: 1
            }
          },
          "postcss-loader"
        ],
        // loader: "css-loader"
      },
   ]
}

如何处理less文件？

在我们开发中，我们可能会使用less、sass、stylus的预处理器来编写css样式，效率会更高。那么，如何可以让我们的环境支持这些预处理器呢？首先我们需要确定，less、sass等编写的css需要通过工具转换成普通的css；我们可以使用less工具来完成它的编译转换：

npm install less -D

执行如下命令：

npx less ./src/css/title.less > title.css

但是在项目中我们会编写大量的css，它们如何可以自动转换呢？

查看代码


@fontSize: 50px;
@fontWeight: 700;

.content {
  font-size: @fontSize;
  font-weight: @fontWeight;
}

但是在项目中我们会编写大量的css，它们如何可以自动转换呢？这个时候我们就可以使用less-loader，来自动使用less工具转换less到css；配置webpack.config.js

浏览器兼容性

我们知道市面上有大量的浏览器：有Chrome、Safari、IE、Edge、Chrome for Android、UC Browser、QQ Browser等等；它们的市场占率是多少？我们要不要兼容它们呢？

其实在很多的脚手架配置中，都能看到类似于这样的配置信息：这里的百分之一，就是指市场占有率

> 1%

last 2 versions

not dead

https://caniuse.com/usage-table

但是有一个问题，我们如何可以在css兼容性和js兼容性下共享我们配置的兼容性条件呢？

就是当我们设置了一个条件： > 1%；
我们表达的意思是css要兼容市场占有率大于1%的浏览器，js也要兼容市场占有率大于1%的浏览器；
如果我们是通过工具来达到这种兼容性的，比如后面我们会讲到的postcss-prest-env、babel、autoprefixer等

如何可以让他们共享我们的配置呢？ 这个问题的答案就是Browserslist；

Browserslist是一个在不同的前端工具之间，共享目标浏览器和Node.js版本的配置：

Autoprefixer
Babel
postcss-preset-env
eslint-plugin-compat
stylelint-no-unsupported-browser-features
postcss-normalize
obsolete-webpack-plugin

那么之后，这些工具会根据我们的配置来获取相关的浏览器信息，以方便决定是否需要进行兼容性的支持：条件查询使用的是caniuse-lite的工具，这个工具的数据来自于caniuse的网站上；

那么在开发中，我们可以编写的条件都有哪些呢？

defaults：Browserslist的默认浏览器（> 0.5%, last 2 versions, Firefox ESR, not dead）。
5%：通过全局使用情况统计信息选择的浏览器版本。 >=，<和<=工作过。
- 5% in US：使用美国使用情况统计信息。它接受两个字母的国家/地区代码。
- > 5% in alt-AS：使用亚洲地区使用情况统计信息。有关所有区域代码的列表，请参见caniuse-lite/data/regions
- > 5% in my stats：使用自定义用法数据。
- > 5% in browserslist-config-mycompany stats：使用来自的自定义使用情况数据browserslist-config-mycompany/browserslist-stats.json。
- cover 99.5%：提供覆盖率的最受欢迎的浏览器。
- cover 99.5% in US：与上述相同，但国家/地区代码由两个字母组成。
- cover 99.5% in my stats：使用自定义用法数据。
dead：24个月内没有官方支持或更新的浏览器。现在是IE 10，IE_Mob 11，BlackBerry 10，BlackBerry 7， Samsung 4和OperaMobile 12.1。
last 2 versions：每个浏览器的最后2个版本。
- last 2 Chrome versions：最近2个版本的Chrome浏览器。
- last 2 major versions或last 2 iOS major versions：最近2个主要版本的所有次要/补丁版本。