What is the result of having multiple rules with the same test in Webpack config?

Question

The Webpack documentation on module.rules is quite sparse:

[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.

In the html-loader documentation, a number of examples exist with two rules testing for the same regular expression, e.g.:

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"],
      },
    ],
  },
};

What is the reason/result of two rules handling the same file?

Why isn't a single rule being used?

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

Answer 1

In my point of view, the test are diffrent,

• /\.html$/ match exact end with .html files
• /\.html$/i is ignore case match, can match .html and .HTML or .Html e.g.

So, you can import .html file as resource, and cant import .HTML as module.