HtmlWebpackPlugin 之前的自定义加载程序导致“意外令牌”错误

编程问答 2022-05-29

问题描述

我正在制作一个自定义加载器，它将采用为 HtmlWebpackPlugin 指定的 HTML 模板，执行一些更改，然后将其传递。

首先，我制作了一个加载器来响应它给出的内容：

//loader.js

module.exports = function(fileContent){
  return fileContent
}

但这会导致以下错误：

Html Webpack Plugin:
  Error: Child compilation Failed:
  Module parse Failed: Unexpected token (1:0)
  File was processed with these loaders:
   * ./node_modules/html-webpack-plugin/lib/loader.js
   * ./loader.js

HTML 文件仅用于测试，如下所示：

//index.html

<!DOCTYPE html>
<html>
  <body>
  </body>
</html>

我不确定为什么会发生这样的错误。我查看了 HtmlWebpackPlugin 的源代码并尝试将它接收到的内容记录到控制台，但它与我在 loader.js 中返回的内容完全相同。

我试着给它一个普通的字符串，看看会发生什么，就像这样：

//loader.js

module.exports = function(fileContent){
  return "test"
}

但它告诉我：

HtmlWebpackPlugin
ReferenceError: test is not defined
 - loader.js:1 eval
//...and so on

嗯？所以我想它试图评估我给它的东西？我不确定发生了什么。任何帮助表示赞赏。

这是 HtmlWebpackPlugin 的 loader code：

解决方法

我发现在我的情况下，更好的方法是将模板作为 Javascript 模块从文件中加载。

//webpack.config.js

new HtmlWebpackPlugin({
  template: "./src/customLoader.js",filename: name + ".html",chunks: [name],})

//customLoader.js

module.exports = (htmlFile) => {
  //...do stuff
  return modifiedHtmlFile;
};
javascriptwebpackwebpackwebpackwebpack-dev-server