Webpack dev服务器热模式无法正常工作

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

Answer 3

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 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