I've been experimenting with webpack to bundle project JS files.
My goal is to generate an index.html file under the output dist folder using webpack. To achieve this, I followed the instructions provided in the webpack documentation and installed "html-web-plugin" via npm as shown below:
npm install --save-dev html-webpack-plugin
This package installation reflected in my package.json file with the following update:
"devDependencies": {
"html-webpack-plugin": "^4.3.0"
}
I included this plugin in my webpack.config.js file based on the documentation of webpack:
const HtmlWebpackPlugin = require('html-webpack-plugin');
Inside the configuration object:
plugins: [
new HtmlWebpackPlugin({
title: 'Output Management'
})
],
To execute npm scripts, I added the following code snippet in my package.json file:
"scripts": {
"devNoServer": "webpack --d --watch",
"dev": "webpack-dev-server",
"build": "webpack -p",
"test": "echo \"Error: no test specified\" && exit 1"
},
However, when running either npm run dev or npm run build, I encountered the error message below which seems to be related to the 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! 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
Interestingly, when I do not use the "html-webpack-plugin", the npm run dev or npm run build commands work fine and generate the bundle.js file in the dist folder.
I'm struggling to identify what I might be doing wrong while setting up the "html-webpack-plugin". Any advice or solutions would be greatly appreciated.