Webpack dev服務器熱模式無法正常工作

Question

繼承我的配置：

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

一切都按預期工作，除了熱負載（當我更改文件時沒有刷新或更改）。 我在這做錯了什么？

Answer 1

您需要將<script src="http://localhost:8080/webpack-dev-server.js"></script>到index.html。使用API​​時不會添加它

“請注意，webpack配置未傳遞給WebpackDevServer API，因此在這種情況下不使用webpack配置中的devServer選項。此外，WebpackDevServer API沒有內聯模式。 <script src="http://localhost:8080/webpack-dev-server.js"></script>應該手動將<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配置的入口點

Answer 2

一定要設置

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

在webpackConfig中也是如此

Answer 3

如果你使用redux可以嘗試這個。

由於一些隨機的原因， redux-devtools不允許我進行熱重裝。 嘗試從root組件中刪除它並使用redux compose配置。

注意：在商店配置中使用帶有此配置的redux devtool瀏覽器擴展： window.devToolsExtension ? window.devToolsExtension() : f => f 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