Webpack 用於創建索引的 html-webpack-plugin 配置錯誤。html

Question

我正在嘗試一些帶有 webpack 的 POC 來捆綁項目 JS 文件。

我想通過 webpack 在 output dist 文件夾下創建 index.html 文件。 為此，根據webpack 文檔，通過 npm 安裝“html-web-plugin”：

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

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

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

根據 webpack 的文檔，在 webpack.config.js 中使用了這個插件：

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

在配置 object 內部：

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 運行 dev OR npm 運行構建命令時，出現以下似乎與 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 OR npm run build 命令可以正常工作並在 dist 文件夾中創建 bundle.js。

使用“html-webpack-plugin”我做錯了什么嗎？ 我找不到這個錯誤，它可以在任何地方修復。

任何輸入/解決方案都會非常有幫助。

Answer 1

經過數小時的四處尋找，閱讀大量文檔后，這對我有用。 我正在使用這個"html-webpack-plugin": "^4.3.0"所以我恢復使用html-webpack-plugin@2.24.1並且 make 命令有效。 不確定，但可能是版本的問題。