html-loader 的用途是什么以及它在 Webpack 中是如何工作的答案

【问题标题】：What is the use of html-loader and how it work's in Webpackhtml-loader 的用途是什么以及它在 Webpack 中是如何工作的
【发布时间】：2020-09-27 01:04:16
【问题描述】：

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

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

html-loader 定义表示它将 html 导出为字符串（这是什么意思）。

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

我想知道，html-loader 到底是做什么的。它是将html 转换为字符串还是将img 标签转换为require。这一切如何协同工作。

谁能详细解释一下。

【问题讨论】：

同样的问题。如果你能找到它？

标签： javascript webpack webpack-loader webpack-html-loader

【解决方案1】：

因为 webpack 在 5.0 中彻底改变了它的工作方式。 “将 HTML 导出为字符串”不再是对用例的最佳描述。过去，人们会将 html-loader 与 extract-loader 和 file-loader 链接起来以发出 html。现在，无论出于何种原因，我都会使用它来解析 html。 https://v4.webpack.js.org/loaders/extract-loader/

【讨论】：

【解决方案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

【讨论】：

你能告诉我html-loader真的把整个HTML文件转换成JavaScript字符串吗