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

Question

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

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

html-loader定义说它将html导出为字符串(这是什么意思(。

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

我想知道，html加载器实际上是做什么的。它是将html转换为字符串还是仅将img标签转换为require.所有这些如何协同工作。

有人可以详细解释一下。

Answer 1

我以不同的顺序回答您的问题，因为我相信这是理解html-loader用法的更合乎逻辑的顺序。

我将首先回答两个基本问题。

问。默认情况下，什么类型的资产 webpack 可以理解？

一个。默认情况下，webpack 只理解 JavaScript。

问。如果我们想使用其他类型的资产(即 HTML、CSS、图像等(，我们应该怎么做？

一个。我们必须使用加载器和插件来扩展 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还将每个可加载属性转换为require()调用。再次，因为 JavaScript 不理解 HTML 相关的语法，如src、href等，但它理解require()语法，即与 JavaScript 相关的语法。

有关 API 的详细信息，请参阅客户端 Web API。

问。这是什么意思(您可能需要为配置中的图像指定加载器(？

一个。如果你的.html文件里面有一个img，那么图像将是必需的，但同样，webpack 默认只能理解 JavaScript。因此，您必须设置一个加载器来允许 webpack 处理您的图像。

问。html-loader如何运作？

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

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

Answer 2

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

Answer 3

正如你从 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