Webpack dev server hot mode not working

Question

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?

Answer 1

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

Answer 2

be sure to set

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

in the webpackConfig as well