CODEWITHSUNDEEP
javascriptwebpackwebpack-dev-server
Evan
Evan

Reputation: 6115

Webpack dev server hot mode not working

Heres my config:

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

And here's the gulp task im running:

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 the hot loading (no refresh or change when I make changes to files). What am I doing wrong here?

Upvotes: 6

Views: 11491

Answers (3)

Priyanshu Chauhan
Priyanshu Chauhan

Reputation: 5535

If you are using redux can try this.

For some random reason redux-devtools was not allowing hot reload for me. Try removing it from root component and redux compose config.

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

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

Or try hot reload 3: example: https://github.com/gaearon/redux-devtools/commit/64f58b7010a1b2a71ad16716eb37ac1031f93915

Upvotes: 0

Elise Chant
Elise Chant

Reputation: 5196

be sure to set 

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

in the webpackConfig as well

Upvotes: 1

errnesto
errnesto

Reputation: 832

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

"Notice that webpack configuration is not passed to WebpackDevServer API, thus devServer option in webpack configuration is not used in this case. Also, there is no inline mode for WebpackDevServer API. <script src="http://localhost:8080/webpack-dev-server.js"></script> should be inserted to HTML page manually." (http://webpack.github.io/docs/webpack-dev-server.html)

maybe you also need to add 'webpack/hot/dev-server' as an entrypoint to your webpack config

Upvotes: 7

Related Questions