Webpack 中如何配置 Loader？

推荐答案

在 Webpack 中配置 Loader 主要通过 module.rules 属性来实现。以下是一个典型的 Loader 配置示例：

// www.javascriptcn.com code example
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/, // 匹配文件类型
        exclude: /node_modules/, // 排除 node_modules 目录
        use: {
          loader: 'babel-loader', // 使用的 Loader
          options: { // Loader 的配置选项
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'] // 使用多个 Loader
      }
    ]
  }
};

本题详细解读

1. module.rules 配置

module.rules 是 Webpack 中用于配置 Loader 的核心属性。它是一个数组，数组中的每个对象都定义了一条规则，用于匹配和处理特定的文件类型。

2. test 属性

test 属性是一个正则表达式，用于匹配文件类型。例如，test: /\.js$/ 表示匹配所有以 .js 结尾的文件。

3. exclude 和 include 属性

• exclude 属性用于排除某些目录或文件，通常用于排除 node_modules 目录，以避免对第三方库进行处理。
• include 属性用于指定需要处理的目录或文件，通常用于指定项目源代码目录。

4. use 属性

use 属性用于指定使用的 Loader。它可以是一个字符串、一个对象或一个数组。

• 如果是字符串，表示使用单个 Loader，例如 use: 'babel-loader'。
• 如果是对象，可以配置 Loader 的选项，例如：

  use: {
    loader: 'babel-loader',
    options: {
      presets: ['@babel/preset-env']
    }
  }

• 如果是数组，表示使用多个 Loader，Webpack 会从右向左依次应用这些 Loader。例如：

  use: ['style-loader', 'css-loader']

5. Loader 的执行顺序

当使用多个 Loader 时，Webpack 会按照从右到左的顺序依次执行。例如，use: ['style-loader', 'css-loader'] 会先执行 css-loader，然后再执行 style-loader。

6. Loader 的选项

每个 Loader 都可以通过 options 属性来配置特定的选项。例如，babel-loader 可以通过 presets 选项来配置 Babel 的预设。

7. 其他配置

除了上述常见的配置外，module.rules 还支持其他一些配置项，例如 enforce（强制 Loader 的执行顺序）、resourceQuery（根据查询参数匹配文件）等。

通过以上配置，Webpack 可以根据文件类型自动应用相应的 Loader，从而实现文件的处理和转换。