webpack - Webpack 配置中具有相同测试的多个规则会产生什么结果？

Question

Webpack 文档 module.rules非常稀疏:

[Rule]

An array of Rules which are matched to requests when modules are created. These rules can modify how the module is created. They can apply loaders to the module, or modify the parser.

在 html-loader documentation ，存在许多使用两个规则测试同一正则表达式的示例，例如:

module.exports = {
  output: {
    assetModuleFilename: "[name][ext]",
  },
  module: {
    rules: [
      {
        test: /\.html$/,
        type: "asset/resource",
        generator: {
          filename: "[name][ext]",
        },
      },
      {
        test: /\.html$/i,
        use: ["extract-loader", "html-loader"],
      },
    ],
  },
};

两条规则处理同一文件的原因/结果是什么？

为什么不使用单一规则？

module.exports = {
  output: {
    assetModuleFilename: "[name][ext]",
  },
  module: {
    rules: [{
        test: /\.html$/,
        use: ["extract-loader", "html-loader"],
        type: "asset/resource",
        generator: {
          filename: "[name][ext]",
        },
      }
    ],
  },
};

Answer 1

在我看来，测试是不同的，

• /\.html$/ 与 .html 文件完全匹配
• /\.html$/i 忽略大小写匹配，可以匹配 .html 和 .HTML 或 .Html，例如

因此，您可以将 .html 文件作为资源导入，但不能将 .HTML 作为模块导入。