Webpack 5（六）Loader

什么是 loader

loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。

本质上，webpack loader 将所有类型的文件，转换为应用程序的依赖图（和最终的 chunk）可以直接引用的模块。

使用 loader

在你的应用程序中，有三种使用 loader 的方式：

配置（推荐）：在 webpack.config.js 文件中指定 loader

module: {
  rules: [
    {       
      test: /\.css$/,
      use: ['style-loader', 'css-loader']
    }              
  ]
}

内联：在每个 import 语句中显式指定 loader

import Styles from 'style-loader!css-loader?modules!./styles.css';

CLI：在 shell 命令中指定它们

webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader'

loader 的路径解析

loader 可以是绝对路径、相对路径，也可以是模块路径，相对路径相对于 context 选项（该选项默认值为配置文件所在的目录），模块路径采用模块解析规则。一般 loader 都是通过 npm 安装到 node_modules 目录中，因此一般都是通过模块路径来引用 loader。

module.exports = {
  context: path.resolve(__dirname),
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['./node_modules/style-loader', 'css-loader']
      }
    ]
  }
}

module.rules

module: {
  rules: [
    {
      test: /\.css$/,
      use: [MiniCssExtractPlugin.loader, 'css-loader']
    },
    {
      test: /\.js$/,
      include: [
          path.resolve(__dirname, 'src')
      ],
      exclude: [
          path.resolve(__dirname, 'src/node_modules'),
          path.resolve(__dirname, 'src/libs')
      ]
    }
  ]
}

匹配规则

module.rules 是匹配规则数组，数组中的每一项为一条匹配规则对象，以下称为 rule。每条 rule 包括匹配条件和匹配结果。

对于依赖图中的每个模块的绝对路径，都按照 module.rules 中的 rule 依次进行匹配。如果模块的绝对路径满足某个 rule 的匹配条件，则对该模块应用该 rule 的 匹配结果中指定的 loader 进行预处理。? 如果模块路径满足多个 rule 的匹配条件 ?

匹配条件

匹配条件包括 test include exclude 选项，每个选项为一个匹配条件，选项的值可以是：

• 字符串：字符串的值一般为绝对路径。如果模块的绝对路径以该字符串开头，则满足该条匹配条件。
• 正则表达式：如果模块的绝对路径 url.test(reg) 返回 true，则满足该条匹配条件。
• 数组：数组元素为字符串或正则表达式，每个元素为一个匹配条件，至少需要满足一个匹配条件。

如果某个 rule 同时有多个匹配条件选项，则模块的绝对路径必须同时满足所有的匹配条件，才会对模块应用匹配结果。test 和 include 具有相同的作用，都是必须匹配选项。exclude 是必不匹配选项（优先于 test 和 include）。

最佳实践：

• 只在 test 中使用正则表达式。
• 在 include 和 exclude 中使用绝对路径数组。
• 尽量避免 exclude，更倾向于使用 include。

实例：

{
    test: /\.js$/,
    include: [
        path.resolve(__dirname, 'src')
    ],
    exclude: [
        path.resolve(__dirname, 'src/node_modules'),
        path.resolve(__dirname, 'src/libs')
    ]
}

以上代码为一条 rule，如果某个模块不在 ./src/node_modules/ 和 ./src/libs/ 目录下，并且在 ./src/ 目录下，并且模块名以 .js 结尾，则满足该条 rule 的匹配条件。

匹配结果

匹配结果包括 use 选项，指定应用的 loader，选项的值可以是：

• 字符串
• 对象
• 数组：数组元素为字符串或对象，从后往前应用 loader

实例：

module: {
  rules: [
    {
      test: /\.js$/,
      use: 'babel-loader'
    },
    
    {
      test: /\.(jpe?g|png|gif)$/,
      use: {
        loader: 'file-loader',
        options: {...}
      }
    },
    
    {
      test: /\.css$/,
      use: [
        'style-loader',
        'css-loader',
        {
          loader: 'postcss-loader',
          options: {...}
        }
      ]
    }
  ]
}

先对 css 文件应用 css-loader，再应用 style-loader，css-loader 的输出作为 style-loader 的输入。