javascript Webpack 开发服务器热模式不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30512503/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Webpack dev server hot mode not working
提问by Evan
Heres my config:
这是我的配置：
devServer: {
contentBase: '/web/dist/',
hot: true,
stats: {colors: true},
inline: true
}
And here's the gulp task im running:
这是我正在运行的 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();
});
});
Everything works as expected except the hot loading (no refresh or change when I make changes to files). What am I doing wrong here?
除了热加载（当我更改文件时没有刷新或更改）外，一切都按预期工作。我在这里做错了什么？
回答by errnesto
You need to add <script src="http://localhost:8080/webpack-dev-server.js"></script>to your index.html It is not added when you use the API
需要在<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 配置没有传递给 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)
maybe you also need to add 'webpack/hot/dev-server'as an entrypoint to your webpack config
也许您还需要将'webpack/hot/dev-server'入口点添加到您的 webpack 配置中
回答by Elise Chant
be sure to set
一定要设置
webpackConfig.plugins.push(new webpack.HotModuleReplacementPlugin());
in the webpackConfig as well
在 webpackConfig 中也是如此
回答by Priyanshu Chauhan
If you are using redux can try this.
如果你正在使用 redux 可以试试这个。
For some random reason redux-devtoolswas not allowing hot reload for me. Try removing it from root component and redux composeconfig.
由于某些随机原因redux-devtools，我不允许热加载。尝试从根组件和redux compose配置中删除它。
Note: Use redux devtool browser extension with this config in your store configuration: window.devToolsExtension ? window.devToolsExtension() : f => f
注意：在您的商店配置中使用带有此配置的 redux devtool 浏览器扩展： window.devToolsExtension ? window.devToolsExtension() : f => f
Also, must read: https://medium.com/@rajaraodv/webpacks-hmr-react-hot-loader-the-missing-manual-232336dc0d96#.ejpsmve8f
另外，必须阅读：https: //medium.com/@rajaraodv/webpacks-hmr-react-hot-loader-the-missing-manual-232336dc0d96#.ejpsmve8f
Or try hot reload 3: example: https://github.com/gaearon/redux-devtools/commit/64f58b7010a1b2a71ad16716eb37ac1031f93915
或者尝试热重载 3：例如：https: //github.com/gaearon/redux-devtools/commit/64f58b7010a1b2a71ad16716eb37ac1031f93915
