Javascript webpack-dev-server 热重载不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39066298/
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 reload not working
提问by riccardolardi
My file structure is:
我的文件结构是：
dist
css
style.css
index.html
js
bundle.js
src
css
style.css
index.html
js
main.js
node_modules
webpack.config.js
package.json
My webpack.config.js looks like:
我的 webpack.config.js 看起来像：
module.exports = {
entry: './src/js/main.js',
output: {
path: __dirname,
filename: './dist/js/bundle.js'
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /(node_modules)/,
loader: 'babel',
query: {
presets: ['es2015']
}
},
{
test: /\.vue$/,
loader: 'vue'
}
]
}
};
I run:
我跑：
webpack-dev-server --content-base dist --hot
And it builds and seems like it's working. localhost:8080 shows the expected result but hot-reload does just not work. When I change a file I can see in terminal that a rebuild is happening but nothing happens in the browser. Am I missing something in the config?
它可以构建并且似乎正在运行。localhost:8080 显示了预期的结果，但热重载不起作用。当我更改文件时，我可以在终端中看到正在重建，但浏览器中没有任何反应。我在配置中遗漏了什么吗？
回答by fafaro
What worked for me is to write <script src="bundle.js">and not <script src="dist/bundle.js">in my index.htmlfile.
对我有用的是写<script src="bundle.js">而不是<script src="dist/bundle.js">在我的index.html文件中。
// index.html
<script src="bundle.js"></script> // works
<script src="dist/bundle.js"></script> // doesn't work!
Keeping dist/bundle.jsas the output file works perfectly fine if you just build it using webpack. But when using webpack-dev-server, the static file already in the file system continues to be served, and not the latest hot replacement. It seems webpack-dev-servergets confused when it sees dist/bundle.jsin the html file and doesn't hot replace it, even though webpack.config.jsis configured to that path.
保持dist/bundle.js作为输出文件的工作完全正常，如果你只是用它构建webpack。但是在使用时webpack-dev-server，会继续提供文件系统中已有的静态文件，而不是最新的热替换。webpack-dev-server当它dist/bundle.js在 html 文件中看到并且不会热替换它时，它似乎会感到困惑，即使webpack.config.js配置为该路径。
回答by Mario Tacke
When using webpack-dev-server, it builds all files internally and does notspit them out into your output path. Running webpackalone, without the dev server, does the actual compilation to disk. The dev server does everything in memory which speeds up re-compilation by a lot.
使用时webpack-dev-server，它会在内部构建所有文件，并且不会将它们吐出到您的输出路径中。webpack单独运行，没有开发服务器，实际编译到磁盘。开发服务器在内存中执行所有操作，这大大加快了重新编译的速度。
To fix your hot reload issue, set the content base to your source directory and enable inline-mode
要解决您的热重载问题，请将内容库设置为您的源目录并启用内联模式
Like so:
像这样：
webpack-dev-server --content-base src --hot --inline
回答by Priyanshu Chauhan
--inline --hot wasn't an issue for me
--inline --hot 对我来说不是问题
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
回答by Nelson Teixeira
None of the options on this page worked for me. After changing the devServer section to:
此页面上的所有选项都不适合我。将 devServer 部分更改为：
devServer: {
port: 8080,
contentBase: ['./src', './public'], // both src and output dirs
inline: true,
hot: true
},
it worked.
有效。
回答by Tom
Webpack hot reloading stopped working for me as well. The solution for me was to delete the node_modulesfolder and fresh install all dependencies.
Just open the parent folder of node_modulesin your terminal and run npm install
Webpack 热重载对我也不起作用。我的解决方案是删除node_modules文件夹并全新安装所有依赖项。只需打开node_modules终端中的父文件夹并运行npm install
回答by Jay Bidwai
100% Working Solution
100% 工作解决方案
You have to just follow 3 steps and you will get your hot reloading as you expected
您只需按照 3 个步骤操作，即可按预期进行热加载
- Include "publicPath" key in "Output" property of webpack config. "publicPath" should contain path to your bundle.js file so that dev-server will know if there is any change in your bundle.js file and it will reload your application.
- 在 webpack 配置的“输出”属性中包含“publicPath”键。“publicPath”应该包含您的 bundle.js 文件的路径，以便开发服务器知道您的 bundle.js 文件中是否有任何更改，并且它会重新加载您的应用程序。
Your config should look like this -
你的配置应该是这样的 -
output: { path: __dirname, publicPath:"/dist/js/", filename: './dist/js/bundle.js' }
output: { path: __dirname, publicPath:"/dist/js/", filename: './dist/js/bundle.js' }
- Add "devServer" option in config file -
- 在配置文件中添加“devServer”选项 -
devServer:{ contentBase:"/src/", inline:true, stats:"errors-only" }
devServer:{ contentBase:"/src/", inline:true, stats:"errors-only" }
Please note that contentBaseshould point to the path where you put your index.html file which contain your script tag in your case it will be "/src/"
请注意contentBase应该指向您放置 index.html 文件的路径，该文件包含您的脚本标签，在您的情况下它将是“/src/”
- At last you have to make sure 'src' attribute of your 'script' tag in index.html points to bundle.js starting from "http://localhost:port" as follow -
- 最后，您必须确保 index.html 中“script”标签的“src”属性指向从“ http://localhost:port”开始的 bundle.js ，如下所示 -
<script src="http://localhost:portnumber + value in publicPath + bundle.js"></script>
<script src="http://localhost:portnumber + value in publicPath + bundle.js"></script>
in your case it will look like this -
在你的情况下，它看起来像这样 -
<script src="http://localhost:8080/js/dist/bundle.js" type="text/javascript"></script>
And finally remember webpack-dev-server doesn't compile your js file or make build or watch on your jsfile it dose everything in memory to watch on your js file you have to run
webpack --watchin seprate window
最后记住webpack-dev-server doesn't compile your js file or make build or watch on your js文件它会处理内存中的所有内容以查看您必须webpack --watch在单独的窗口中运行的 js 文件
回答by Shadab Ahmed
Check your console logs if it has below error then add cors to your webpack dev server file
检查您的控制台日志是否有以下错误，然后将 cors 添加到您的 webpack 开发服务器文件中
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin react hot reload
Ideally add below entry in you dev server js
理想情况下，在您的开发服务器 js 中添加以下条目
headers: { "Access-Control-Allow-Origin": "*" },
回答by hammerabi
Try this:
尝试这个：
In your package.jsonfile, delete the line that contains "test" "echo \"Error: no test specified\" && exit 1"under the scripts object, and replace it with:
在您的package.json文件中，删除包含"test" "echo \"Error: no test specified\" && exit 1"在脚本对象下的行，并将其替换为：
...
"scripts": {
"start": "webpack-dev-server --hot"
},
...
Then to restart your project, just use npm start.
然后要重新启动您的项目，只需使用npm start.
This worked for me when I ran into this problem.
当我遇到这个问题时，这对我有用。
Edit: Can you share your package.jsonfile?
编辑：你能分享你的package.json文件吗？
Try adding this to webpack.config.js as well
尝试将其添加到 webpack.config.js 中
devServer: {
inline: true,
port: 3000,
hot: true
},
