webpack-dev-server 热重载不起作用答案

【问题标题】：webpack-dev-server hot reload not workingwebpack-dev-server 热重载不起作用
【发布时间】：2016-12-28 05:22:08
【问题描述】：

我的文件结构是：

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

我的 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'
            }
        ]
    }
};

我跑：

webpack-dev-server --content-base dist --hot

它构建并且似乎正在运行。 localhost:8080 显示了预期的结果，但热重载不起作用。当我更改文件时，我可以在终端中看到正在重建，但浏览器中没有任何反应。我在配置中遗漏了什么吗？

【问题讨论】：

标签： javascript node.js webpack vue.js

【解决方案1】：

对我有用的是在我的 index.html 文件中写入 <script src="bundle.js"> 而不是 <script src="dist/bundle.js">。

// index.html
<script src="bundle.js"></script>      // works
<script src="dist/bundle.js"></script> // doesn't work!

如果您只是使用webpack 构建它，那么将dist/bundle.js 保留为输出文件可以正常工作。但是在使用webpack-dev-server时，文件系统中已经存在的静态文件会继续被服务，而不是最新的热替换。当webpack-dev-server 在 html 文件中看到 dist/bundle.js 并且没有热替换它时，webpack-dev-server 似乎会感到困惑，即使 webpack.config.js 已配置为该路径。

【讨论】：

这对我也有用。我可以在 start ℹ ｢wds｣看到以下消息：Project is running at localhost:8080 ℹ ｢wds｣：webpack 输出来自 /
也帮助了我。这对我来说没有任何意义。谢谢！
这是我的最终解决方案。我只是希望我早点偶然发现这一点，我会节省一天失败的尝试。
这不是一个好的答案。如果您确实喜欢这个答案，则每次都必须重命名文件名。相反，您必须设置 publicPath 选项。 output: { publicPath:"/dist", ... }。请参阅下面的 Jay Bidwai 的回答。 stackoverflow.com/a/51762971/10587221

【解决方案2】：

当使用webpack-dev-server 时，它会在内部构建所有文件并且不会将它们吐出到您的输出路径中。在没有开发服务器的情况下单独运行webpack，将实际编译到磁盘。开发服务器在内存中执行所有操作，这大大加快了重新编译的速度。

要解决您的热重载问题，请将内容库设置为您的源目录并启用inline-mode

像这样：

webpack-dev-server --content-base src --hot --inline

【讨论】：

我不明白。那么使用 bundle.js 添加脚本的 index.html 在哪里，或者它是如何工作的？如果它指向源，我会在 localhost:8080 获得我的应用程序的文件夹结构
@JuanSolano，<script> 标签可以通过 webpack 注入到您现有的 html 中，或者您可以从模板生成 html。为了给你一个正确的答案，我建议你问一个关于你的具体设置的问题；我很乐意提供帮助！
或者，在 webpack.config.js 中修改 devServer 节点以包含 {inline:true, hot: true} ？
总是有这个问题，并且当它应该是 src 时将内容库作为 dist！谢谢。

【解决方案3】：

此页面上的所有选项都不适合我。将 devServer 部分更改为：

devServer: {
    port: 8080,
    contentBase: ['./src', './public'], // both src and output dirs
    inline: true,
    hot: true
},

成功了。

【讨论】：

谢谢，找了2个小时，这个答案在无数博客和cmets后解决了，点赞！

【解决方案4】：

100% 有效解决方案

您只需遵循 3 个步骤，即可按预期获得热重载

在 webpack 配置的“输出”属性中包含“publicPath”键。 “publicPath”应该包含你的 bundle.js 文件的路径，以便开发服务器知道你的 bundle.js 文件是否有任何变化，它会重新加载你的应用程序。

你的配置应该是这样的 -

output: {
   path: __dirname,
   publicPath:"/dist/js/",
   filename: './dist/js/bundle.js'
}

在配置文件中添加“devServer”选项 -

devServer:{
   contentBase:"/src/",
   inline:true,
   stats:"errors-only"
}

请注意，contentBase 应指向您放置包含脚本标签的 index.html 文件的路径，在您的情况下，它将是“/src/”

最后，您必须确保 index.html 中的 'script' 标签的 'src' 属性指向从“http://localhost:port”开始的 bundle.js，如下所示 -

<script src="http://localhost:portnumber + value in publicPath + bundle.js"></script>

在你的情况下，它看起来像这样 -

<script src="http://localhost:8080/js/dist/bundle.js" type="text/javascript"></script>

最后记住 webpack-dev-server doesn't compile your js file or make build or watch on your js 文件它会在内存中执行所有操作以查看您必须运行的 js 文件 webpack --watch 在单独的窗口中

【讨论】：

【解决方案5】：

--inline --hot 对我来说不是问题

如果你使用 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

【讨论】：

【解决方案6】：

唯一对我有用的是在“devServer”的配置中应用“hotOnly”（在“webpack.config.js”上），如下所示：

devServer: {
    hotOnly: true,
},

在重新加载“Webpack Dev Server”后，“热重载”至少在保存 CSS 或 JS 文件中的任何更改后有效。

【讨论】：

【解决方案7】：

Webpack 热重载也停止了对我的工作。我的解决方案是删除 node_modules 文件夹并全新安装所有依赖项。只需在终端中打开node_modules 的父文件夹并运行npm install

【讨论】：

【解决方案8】：

所有受苦的人：不要忘记公共路径前的斜线： publicPath:’/assets/scripts/‘ 不是 publicPath:’assets/scripts/’ 由于路径字符串中的 1 个正斜杠，丢失了 3 天

【讨论】：

【解决方案9】：

试试这个：

在您的package.json 文件中，删除脚本对象下包含"test" "echo \"Error: no test specified\" && exit 1" 的行，并将其替换为：

...
"scripts": {
    "start": "webpack-dev-server --hot"
  },

...

然后要重新启动您的项目，只需使用npm start。

当我遇到这个问题时，这对我有用。

编辑：你能分享你的package.json 文件吗？

尝试将它也添加到 webpack.config.js 中

devServer: {
  inline: true,
  port: 3000,
  hot: true
},

【讨论】：

我直接从 CLI 运行开发服务器，而不是使用 npm 脚本，这根本不应该有任何区别......我认为这与我的文件结构有关，我可能不会正确使用 --content-base 参数
为什么要删除测试存根？

【解决方案10】：

检查您的控制台日志是否有以下错误，然后将 cors 添加到您的 webpack 开发服务器文件中

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin react hot reload

最好在你的开发服务器 js 中添加以下条目

headers: { "Access-Control-Allow-Origin": "*" },

【讨论】：

【解决方案11】：

我增加了可以查看的文件更改的最大数量，这对我有用。我想我的问题是文件太多。

echo fs.inotify.max_user_watches=1999999 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

source

【讨论】：

【解决方案12】：

您可以尝试将其添加到您的配置中：

module.exports = {
...
  devServer: {
    contentBase: './dist/', // Since your index.html is in the "dist" dir
    open: true,             // Automatically open the browser
    hot: true,              // Automatically refresh the page whenever bundle.js changes
                            // (You will have to refresh manually if other files change)
  },
...
};

然后运行（无选项）：
webpack-dev-server

【讨论】：

【解决方案13】：

通过上述设置，在使用webpack-dev-server 进行静态页面构建时，我将捆绑 js 或任何配置为输出的 js 文件添加到 html 页面。这样，我在进行任何更改后都会刷新我的静态页面。

【讨论】：