I'm trying to configure HtmlWebpackPlugin so I don't have to deal with maintaining our index.html file manually. For doing this I added following dependency and plugin in webpack.config.js
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
...
output: {
path: path.join(__dirname, "/dist"),
filename: "[name].[contenthash].bundle.js"
}
...
plugins: [
new ExtractTextPlugin("css/styles.css"),
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: 'Output Management'
}),
...
But when I did npm start or npm run build I'm getting following error
/d/sample-project/node_modules/webpack-dev-server/bin/webpack-dev-server.js:373
throw e;
^
TypeError: Cannot read property 'make' of undefined
at PersistentChildCompilerSingletonPlugin.apply (/d/sample-project/node_modules/html-webpack-plugin/lib/cached-child-compiler.js:182:20)
at new CachedChildCompilation (/d/sample-project/node_modules/html-webpack-plugin/lib/cached-child-compiler.js:68:44)
at HtmlWebpackPlugin.apply (/d/sample-project/node_modules/html-webpack-plugin/index.js:92:33)
at Compiler.apply (/d/sample-project/node_modules/tapable/lib/Tapable.js:375:16)
at webpack (/d/sample-project/node_modules/webpack/lib/webpack.js:33:19)
at startDevServer (/d/sample-project/node_modules/webpack-dev-server/bin/webpack-dev-server.js:367:16)
at processOptions (/d/sample-project/node_modules/webpack-dev-server/bin/webpack-dev-server.js:350:5)
at Object.<anonymous> (/d/sample-project/node_modules/webpack-dev-server/bin/webpack-dev-server.js:495:1)
at Module._compile (module.js:653:30)
at Object.Module._extensions..js (module.js:664:10)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! lsac@0.0.1 start: `webpack-dev-server --host 0.0.0.0 --port 3000`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the lsac@0.0.1 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
How to solve this error? Or Is there is anything wrong with this approach.