html-loader 的用途是什么，它在 Webpack 中是如何工作的

Question

我在学习 webpack 时遇到了loaders， 的定义loaders说它转换你的代码，以便它可以包含在 javascript 中bundle。

但是，html-loader 是如何工作的？

该html-loader认定中说，它导出HTML作为字符串（什么意思）。

它还说每个可加载的属性（例如<img src="image.png"导入为require('./image.png')，并且您可能需要在配置（file-loader或url-loader）中为图像指定加载器，这是什么意思。

我想知道，实际上 html-loader 做了什么。它是转换html为 String 还是只是将img标签转换为require. 所有这些如何协同工作。

谁能详细解释一下。

Answer 1

我以不同的顺序回答您的问题，因为我相信这是理解html-loader.

我首先要回答两个根本问题。

问：webpack 默认理解什么类型的资源？

答：默认情况下，webpack 只识别 JavaScript。

问：如果我们想要使用其他类型的资源（即 HTML、CSS、图像等），我们应该怎么做？

A.我们必须使用loader和插件来扩展webpack的功能。

换句话说，加载器和插件允许我们在 webpack 中使用静态资源。

问：将 HTML 导出为字符串是什么意思？

答：您需要记住 HTML 和 JavaScript 是两个不同的东西。如果您想使用 JavaScript 操作 DOM，您可以通过 API 来实现，例如，当您编写

const p = document.createElement("p");
document.body.appendChild(p);

您正在使用文档对象写入 HTML 文件。你也可以这样做：

const html = `
  <h1>heading level 1</h1>
`;
const header = document.createElement("header");
header.innerHTML = html;

document.body.appendChild(header);

分配给变量的字符串就是所谓的HTML字符串。简单来说，就是一个包含 HTML 标记的字符串。html

这是其功能的一部分html-loader：它读取您的 HTML 文件并将其内容作为 HTML 字符串返回，这些字符串可以被 JavaScript 理解并由 API 使用。

它还将每个可加载属性html-loader转换为调用。还是那句话，因为JavaScript不理解HTML相关语法如、等，但它理解语法，即JavaScript相关语法。require()srchrefrequire()

有关 API 的更多信息，请参阅客户端 Web API。

问：这是什么意思（您可能必须在配置中为图像指定加载程序）？

答：如果您的.html文件内部有图像img，则需要图像，但同样，webpack 默认情况下仅理解 JavaScript。因此，您必须设置一个加载器来允许 webpack 处理您的图像。

问：如何html-loader运作？

答：简单地说，它将读取文件的内容.html，如果它在元素上找到可加载的属性，它会将它们转换为require()调用。作为参数传递给require()函数的 URL 可以引用一个简单的地址（例如，当href属性转换为require()调用时），在这种情况下，您不需要设置额外的加载器；或者它可以引用图像（例如，当 asrc被转换为require()调用时），在这种情况下，由于 webpack 默认情况下不理解图像，因此您必须配置一个加载器（ ）file-loader。

注意：从 webpack 5 开始，webpack 使用资源模块来加载图像。因此，您不需要设置额外的加载器来处理图像。

Answer 2

正如您可以从https://webpack.js.org/loaders/html-loader/中阅读的那样

这不仅仅是转换成字符串。

您可以预处理 html，例如向变量添加值，您可以应用过滤器，...仅举几例

module.exports = {
  module: {
    rules: [
      {
        test: /\.html$/i,
        loader: 'html-loader',
        options: {
          attributes: {
            list: [
              {
                // Tag name
                tag: 'img',
                // Attribute name
                attribute: 'src',
                // Type of processing, can be `src` or `scrset`
                type: 'src',
              },
              {
                // Tag name
                tag: 'img',
                // Attribute name
                attribute: 'srcset',
                // Type of processing, can be `src` or `scrset`
                type: 'srcset',
              },
              {
                tag: 'img',
                attribute: 'data-src',
                type: 'src',
              },
              {
                tag: 'img',
                attribute: 'data-srcset',
                type: 'srcset',
              },
              {
                // Tag name
                tag: 'link',
                // Attribute name
                attribute: 'href',
                // Type of processing, can be `src` or `scrset`
                type: 'src',
                // Allow to filter some attributes
                filter: (tag, attribute, attributes, resourcePath) => {
                  // The `tag` argument contains a name of the HTML tag.
                  // The `attribute` argument contains a name of the HTML attribute.
                  // The `attributes` argument contains all attributes of the tag.
                  // The `resourcePath` argument contains a path to the loaded HTML file.

                  if (/my-html\.html$/.test(resourcePath)) {
                    return false;
                  }

                  if (!/stylesheet/i.test(attributes.rel)) {
                    return false;
                  }

                  if (
                    attributes.type &&
                    attributes.type.trim().toLowerCase() !== 'text/css'
                  ) {
                    return false;
                  }

                  return true;
                },
              },
            ],
          },
        },
      },
    ],
  },
};

上面的代码取自链接，这是过滤的示例。

或者，您也可以使用这个插件html-webpack-plugin