Webpack 开发服务器热模式不起作用

Question

这是我的配置：

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

这是 gulp 任务 im 运行:

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();
    });
});

除热加载外，一切都按预期工作（当我更改文件时没有刷新或更改）。我在这里做错了什么？

Answer 1

您需要将 <script src="http://localhost:8080/webpack-dev-server.js"></script> 添加到您的 index.html 使用 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)

也许您还需要添加 'webpack/hot/dev-server' 作为 webpack 配置的入口点

Answer 2

一定要设置

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

也在 webpackConfig 中

Answer 3

如果你正在使用 redux 可以试试这个。

出于某种随机原因，redux-devtools 不允许对我进行热重载。尝试从根组件和 redux compose 配置中删除它。

注意：在您的商店配置中使用带有此配置的 redux devtool 浏览器扩展：window.devToolsExtension ? window.devToolsExtension() : f => f

另外，必读：https://medium.com/@rajaraodv/webpacks-hmr-react-hot-loader-the-missing-manual-232336dc0d96#.ejpsmve8f

或尝试热重载 3：示例：https://github.com/gaearon/redux-devtools/commit/64f58b7010a1b2a71ad16716eb37ac1031f93915

Webpack 开发服务器热模式不起作用

Webpack dev server hot mode not working

javascript

webpack

webpack-dev-server