用于创建 index.html 的 html-webpack-plugin 的 Webpack 配置错误

Question

我正在尝试一些带有 webpack 的 POC 来捆绑项目 JS 文件。

我想通过 webpack 在 output dist 文件夹下创建一个 index.html 文件。为此，根据webpack documentation，通过 npm 安装“html-web-plugin”：

npm install --save-dev html-webpack-plugin

它在 package.json 文件中更新如下：

  "devDependencies": {
    "html-webpack-plugin": "^4.3.0"
  }

根据documentation of webpack在 webpack.config.js 中使用了这个插件：

const HtmlWebpackPlugin = require('html-webpack-plugin');

在配置对象内部：

plugins: [
 new HtmlWebpackPlugin(
    title: 'Output Management'
 )
],

要运行 npm 脚本，在 package.json 文件中使用以下代码：

"scripts": {
  "devNoServer": "webpack --d --watch",
  "dev": "webpack-dev-server",
  "build": "webpack -p",
  "test": "echo \"Error: no test specified\" && exit 1"
},

在运行 npm run dev 或 npm run build 命令时，出现 低于错误，这似乎与 html-web-plugin 相关：

/<PROJECT_PATH>/node_modules/webpack-dev-server/bin/webpack-dev-server.js:373
    throw e;
    ^

TypeError: Cannot read property 'make' of undefined
    at PersistentChildCompilerSingletonPlugin.apply (/<PROJECT_PATH>/node_modules/html-webpack-plugin/lib/cached-child-compiler.js:182:20)
    at new CachedChildCompilation (/<PROJECT_PATH>/node_modules/html-webpack-plugin/lib/cached-child-compiler.js:68:44)
    at HtmlWebpackPlugin.apply (/<PROJECT_PATH>/node_modules/html-webpack-plugin/index.js:92:33)
    at Compiler.apply (/<PROJECT_PATH>/node_modules/tapable/lib/Tapable.js:375:16)
    at webpack (/<PROJECT_PATH>/node_modules/webpack/lib/webpack.js:33:19)
    at startDevServer (/<PROJECT_PATH>/node_modules/webpack-dev-server/bin/webpack-dev-server.js:367:16)
    at /<PROJECT_PATH>/node_modules/webpack-dev-server/bin/webpack-dev-server.js:358:5
    at /<PROJECT_PATH>/node_modules/portfinder/lib/portfinder.js:196:16
    at /<PROJECT_PATH>/node_modules/async/dist/async.js:473:16
    at replenish (/<PROJECT_PATH>/node_modules/async/dist/async.js:1006:25)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! react-sample-broken@1.0.0 dev: `webpack-dev-server`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the react-sample-broken@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /<USER_DIR>/.npm/_logs/2020-06-17T14_50_38_388Z-debug.log

没有使用“html-webpack-plugin”，npm run dev 或 npm run build 命令可以正常工作并在 dist 文件夹中创建 bundle.js。

使用“html-webpack-plugin”我做错了什么吗？我找不到这个错误，它可以在任何地方修复。

任何意见/解决方案都会很有帮助。

Answer 1

经过数小时的查看，阅读大量文档后，这对我有用。 我正在使用这个 "html-webpack-plugin": "^4.3.0" 所以我恢复使用 html-webpack-plugin@2.24.1 并且 make 命令起作用了。 不确定，但可能是版本问题。