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

【问题标题】：Webpack dev server hot mode not workingWebpack 开发服务器热模式不起作用
【发布时间】：2015-05-28 16:44:09
【问题描述】：

这是我的配置：

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

这是我正在运行的 gulp 任务：

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

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

【问题讨论】：

标签： javascript webpack webpack-dev-server

【解决方案1】：

你需要在你的index.html中添加<script src="http://localhost:8080/webpack-dev-server.js"></script> 使用API时没有添加

"请注意，webpack 配置没有传递给 WebpackDevServer API，因此在这种情况下不使用 webpack 配置中的 devServer 选项。此外，WebpackDevServer API 没有内联模式。<script src="http://localhost:8080/webpack-dev-server.js"></script> 应手动插入 HTML 页面。 " (http://webpack.github.io/docs/webpack-dev-server.html)

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

【讨论】：

我在控制台中看到：[WDS] 热模块更换已启用。 framework.bundle.js:114 未捕获错误：[HMR] 热模块替换已禁用。
嗯，你的 webpack 配置中添加了 plugins: [new webpack.HotModuleReplacementPlugin()] 吗？
好吧，这似乎有帮助，但现在它只是不会更新更改的文件。 [WDS] 热模块更换已启用。 framework.bundle.js:600 [HMR] 等待来自 WDS 的更新信号...更改文件但没有任何反应
我需要设置这个 publicPath 选项吗？ publicPath 到底应该指向什么？
我认为您不需要为此设置公共路径。它应该用于提供静态内容。否则我不知道。也许您可以将您的 webpack.config 添加到问题中……

【解决方案2】：

一定要设置

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

在 webpackConfig 中也是如此

【讨论】：

【解决方案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

【讨论】：