《三》webpack 中的 Loader

Loader 用于对特定的模块进行加载和转换。

Loader 的使用：

Loader 都是一些第三方的 npm 模块，Webpack 本身并不包含任何 Loader，因此使用 Loader 前都需要先安装它。

Loader 的使用有三种方式，以 css-loader 为例：

1. 内联方式：在 import/require 语句中指定要使用的 loader，使用 ! 分割。

   // src/js/component.js
   import 'style-loader!css-loader!../css/component.css' 
   

2. 配置方式：在 webpack 配置文件的 module.rules 属性中进行配置。这种方式使用最多。

   // webpack.config.js
   module.exports = {
       module: {
           rules: [
               {
                   // 匹配资源的规则。属性值是正则表达式
                   test: /\.css$/,
                   // webpack 会从后往前执行 loader
                   use: [
                       {
                           // 对匹配到的资源要使用的 loader
                           loader: "css-loader",
                           // 可选属性。属性值是一个字符串或对象，会被传入到 loader 中
                           options: "",
                           // query 属性目前已经被 options 属性代替
                       },
                       // use 的项也可以是字符串，是上面对象的简写形式
                       // "css-loader",
                   ],
                   // 也可以直接使用 loader 属性，是 use 属性的简写形式
                   // loader: "css-loader",
               }
           ]
       }
   }
   

3. CLI 方式：运行 webpack 命令时添加 --module-bind 参数，webpack --module-bind 'css=css-loader'，但是 webpack5 已不再支持。

Loader 常见的配置：

需要在 Webpack 配置文件的 module.rules 中配置 loader，告诉 Webpack 在遇到哪些文件时使用哪些 loader 去解析和转换。rules 的属性值是一个数组，其中存放的是一个个规则 rule 对象，在规则 rule 对象中可以配置多个属性：

1. test：用于匹配资源。属性值通常是正则表达式。

2. use：要使用的 loader。属性值是一个对象或数组。

   默认情况下，如果对一个模块使用了多个 Loader，会从后往前执行其中的 Loader。

3. exclude、include：用来排除或包含指定目录下的模块。

   exclude 和 include 同时存在时，exclude 的优先级更高。

   rules:[
   	{
   		test:/\.css$/,
   		use:['style-loader','css-loader'],
   		exclude:/src\/lib/,
   		include:/src/
   	}
   ]
   

   该规则仅对 src 目录生效，但是排除其中的 src/lib 目录。