HtmlWebpackPlugin 之前的自定义加载程序导致 "Unexpected token" 错误

Question

我正在制作一个自定义加载程序，它将采用为 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.

中 return 完全相同

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

//loader.js

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

但它告诉我：

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

嗯？所以我猜它正在尝试评估我给它的东西？我不确定发生了什么。感谢任何帮助。

这是 HtmlWebpackPlugin 的loader code：

Answer 1

我发现，就我而言，更好的方法是从文件中将模板作为 Javascript 模块加载。

//webpack.config.js

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

//customLoader.js

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

HtmlWebpackPlugin 之前的自定义加载程序导致 "Unexpected token" 错误

Custom loader before HtmlWebpackPlugin causes "Unexpected token" error

javascript

webpack

webpack-dev-server