Webpack开发服务器热更新模式无法正常工作

Question

Heres my config:

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

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

- Evan

Answer 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配置中。

- errnesto

---

我在控制台看到了这个信息：[WDS] 热模块替换已启用。 framework.bundle.js:114 未捕获的错误：[HMR] 禁用了热模块替换。 - Evan

你的 webpack 配置文件中是否添加了 plugins: [new webpack.HotModuleReplacementPlugin()]？ - errnesto

好的，那似乎有所帮助，但现在它只是不会更新更改的文件。[WDS]启用热模块替换。 framework.bundle.js:600 [HMR] 等待来自WDS的更新信号...更改文件却没有任何反应。 - Evan

我需要设置这个publicPath选项吗？publicPath应该指向什么？ - Evan

我认为你不需要公共路径。它应该用于提供静态内容。否则我不知道。也许你可以将你的webpack.config添加到问题中... - errnesto

我也在使用Docker，我认为这就是问题所在。https://dev59.com/O4rda4cB1Zd3GeqPRM0r。尽管如此，我会将其标记为已接受，因为如果我手动触发Docker容器中的更改，它确实可以工作。 - Evan

Answer 2

请确保设置

标签

。

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

在webpack配置文件中也一样。

- Elise Chant

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

- Priyanshu Chauhan