Geek Answers Handbook

Webpack dev server hot mode not working

Here is my configuration:

devServer: { contentBase: '/web/dist/', hot: true, stats: {colors: true}, inline: true }

And here the gulp task is executed:

 gulp.task('build', ['clean', 'styles', 'bower', 'media', 'data', 'homepage'], function(done) { es6promise.polyfill(); console.log('STARTING DEV SERVER...'); server = new WebpackDevServer(webpack(webpackDevConfig), webpackDevConfig.devServer); server.listen(8080, '0.0.0.0', function (err, stats) { if (err) { throw new gutil.PluginError("webpack-dev-server", err); } console.log('DEV SERVER STARTED'); done(); }); });

Everything works as expected, except for a hot boot (without updating or changing when making changes to files). What am I doing wrong here?

+5
source share
3 answers

You need to add <script src="http://localhost:8080/webpack-dev-server.js"></script> to your index.html. It is not added when using the API

"Please note that the webpack configuration is not passed to the WebpackDevServer API, therefore the devServer option is not used in the webpack configuration in this case. There is also no built-in mode for the WebpackDevServer API. <script src="http://localhost:8080/webpack-dev-server.js"></script> should be inserted into the HTML page manually." ( http://webpack.imtqy.com/docs/webpack-dev-server.html )

you may also need to add 'webpack/hot/dev-server' as an entry point to your web package configuration

+6
source

be sure to install

 webpackConfig.plugins.push(new webpack.HotModuleReplacementPlugin());

in webpackConfig also

+1
source

If you are using redux, you can try this.

For some random reason, redux-devtools did not allow me to overload. Try removing it from the root component and redux compose config.

Note. Use the redux devtool browser extension with this configuration in your store configuration: window.devToolsExtension ? window.devToolsExtension() : f => f window.devToolsExtension ? window.devToolsExtension() : f => f

In addition, you must read: https://medium.com/@rajaraodv/webpacks-hmr-react-hot-loader-the-missing-manual-232336dc0d96#.ejpsmve8f

Or try restarting 3: Example: https://github.com/gaearon/redux-devtools/commit/64f58b7010a1b2a71ad16716eb37ac1031f93915

0
source

More articles:


All Articles