Question

我认为只有在某些资源 import ed或 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>

Answer 1

我会尽力回答你的问题：

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

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

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

Answer 2

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

但是，Webpack首先通过html-webpack-plugin与您的html文件联系。您可能出于模板原因而使用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 / my-image.jpg <img src="${require(而不是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-plugin和html-loader时遇到的最常见的用法。

html-webpack-plugin如何与html-loader一起使用？

2 个答案: