Webpack中html-loader的用途和工作原理

xtfmy6hx  于 2022-11-13  发布在  Webpack
关注(0)|答案(2)|浏览(341)

我正在学习webpack,我遇到了loadersloaders的定义说,它转换你的代码,所以它可以被包含在javascript bundle.

但是,html加载器是如何工作的?

html-loader定义说它将html导出为String(这意味着什么)。
它还表示每个可加载属性(例如,<img src="image.png"被导入为require('./image.png'),并且您可能需要为配置中的映像指定加载程序(file-loaderurl-loader)),这是什么意思?
我想知道,html-loader实际上是做什么的。它是把html转换成字符串,还是只是把img标签转换成require。所有这些是如何一起工作的。
能不能有人详细解释一下。

x0fgdtte

x0fgdtte1#

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

wbgh16ku

wbgh16ku2#

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

相关问题