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时不会添加

＆＃34;请注意，webpack配置未传递给WebpackDevServer API，因此在这种情况下不使用webpack配置中的devServer选项。此外，WebpackDevServer API没有内联模式。应将<script src="http://localhost:8080/webpack-dev-server.js"></script>手动插入HTML页面。＆＃34; （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 config。

中删除它

注意：在商店配置中使用带有此配置的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 dev服务器热模式无法正常工作

3 个答案: