webpack - html-webpack-plugin 如何与 html-loader 一起工作？

Question

我认为只有在某些资源被import或require d 并且资源与这样的加载器匹配时才会调用加载器。

但是在下面的代码中，没有在任何地方导入 html 文件，但是由于 html 中的下划线模板内容，仍然需要 html-loader 来使编译通过。

所以我有以下问题：

html-loader 什么时候开始播放？在生成捆绑包之后还是之前？
为什么 webpack 会调用 html-loader？因为插件中的模板设置？

插件是否使用加载器的输出？但是输出只是一个字符串，它怎么能有所作为呢？

//webpack.config.js
const webpack = require('webpack');
const path = require('path');
const htmlPlugin = require('html-webpack-plugin');
module.exports = {
    entry: {
        a: './a.js'
    },
    output: {
    filename: '[name].[chunkhash].js',
    chunkFilename: '[name].[chunkhash].js',
    path: path.resolve(__dirname, 'dist')
},
module: {
    rules: [
    {
      test: /\.html$/,
      loader: "html-loader"
    }
    ]
},
plugins: [
        new htmlPlugin({
        template:path.resolve(__dirname,'index.html')

    })
]
};  

//index.html
    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
    </head>
    <body>
        <script id="item-template" type="text/template">    
        <label><%= title %></label>
      </script>

    </body>
    </html>

score 25 · Accepted Answer

正如您所说，Webpack 仅在您“导入”文件时才知道文件，否则它不知道。

然而，Webpack 首先通过html-webpack-plugin. 您可能html-webpack-plugin出于模板原因使用。我使用它纯粹是为了让 webpack 将生成的 JS 和 CSS 包自动插入到 html 中。我的包文件名包含“哈希”（例如 bundle.b88ef660a5aa8442f616.js）。我不想手动做这件事。

在这一点上，html-loader与无关html-webpack-plugin。您可能额外使用的原因html-loader如下所述。

如果您的模板包含图像怎么办？有些人所做的（这是错误的做法）是使用copy-webpack-plugin将 images 文件夹复制到 output/dist 文件夹并引用 html 中相对于该文件夹的任何图像。这是错误的，因为您的图像绕过了 webpack 并失去了 webpack 的好处，例如为图像名称添加散列、优化图像、摇树等。如果您这样做，webpack 不知道您的图像，您必须手动管理您的图像文件夹。

“正确”的方法是通过“要求”图像让 webpack 了解您的图像依赖关系。<img src="./img/my-image.jpg">因此，您应该编写<img src="${require(./img/my-image.jpg而不是在 html 中)}" />。但是将所有图像引用更改为 require 版本很麻烦，所以当您使用时html-loader，它会自动为您执行此操作。

这可能会立即导致错误。错误将类似于Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type.

所有这些错误意味着 webpack 不知道如何处理图像。而要告诉 webpack 如何处理它不知道的东西，你需要使用适当的加载器。在这种情况下，file-loader。

以上是我遇到的使用webpack-html-pluginand最常见的用法html-loader。

score 4 · Accepted Answer

我会尽力回答你的问题：

HtmlWebpackPlugin 对 html-loader 没有依赖关系。

当 webpack 在你的 javascript: 中检测到以下内容时，html-loader 就会发挥作用require('./app.component.html')，因为你有以下测试：/\.html$/。默认操作是将该文件中的 html 放在声明 require 的位置。
html-loader 独立于 HtmlWebpackPlugin。
据我所知，没有。

我希望你能通过这个答案更好地理解 webpack。

webpack - html-webpack-plugin 如何与 html-loader 一起工作？

2 回答 2

Related

Reference