HtmlWebpackplugin to avoid editing index.html

Viewed 468

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.

0 Answers
Related