webpack-dev-server 热重载不工作

Question

我的文件结构是：

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 显示了预期的结果，但热重载不起作用。 当我更改文件时，我可以在终端中看到重建正在进行，但浏览器中没有任何反应。 我在配置中遗漏了什么吗？

Answer 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.config.js配置为该路径。

Answer 2

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

要解决热重载问题，请将内容库设置为源目录并启用内联模式

像这样：

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

Answer 3

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

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

有效。

Answer 4

100% 工作解决方案

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

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

您的配置应如下所示 -

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

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

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

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

3. 最后，您必须确保 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

Answer 5

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

如果你使用 redux 可以试试这个。

由于某种随机原因redux-devtools不允许我进行热重载。 尝试从根组件和redux compose config 中删除它。

注意：在您的商店配置中使用带有此配置的 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

Answer 6

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

devServer: {
    hotOnly: true,
},

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

Answer 7

对于 Webpack ^5.72.1

这对我有用，

 devServer: {
    port: 3000,
    hot: false,
    liveReload: true,
  },

注意：liveReload 将在文件保存时重新加载整个应用程序，但它会丢失应用程序状态。 热重载会保留状态。 但是 liveReload 似乎为我解决了保存后 css/html 未在浏览器上加载的问题，而无需刷新浏览器。

Answer 8

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

Answer 9

所有受苦的人：不要忘记公共路径前的斜杠： publicPath:'/assets/scripts/'不是publicPath:'assets/scripts/'因为路径字符串中的 1 个正斜杠而丢失了三天

Answer 10

尝试这个：

在您的package.json文件中，删除 scripts 对象下包含"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
},

Answer 11

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

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

理想情况下，在您的开发服务器 js 中添加以下条目

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

Answer 12

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

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

资源

Answer 13

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

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

Answer 14

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

Answer 15

对于 webpack 版本 5，module.loaders 现在是 module.rules。 对于预设，将查询更改为选项。

Answer 16

确保在开发模式下您没有使用将 css 提取到文件中的插件，例如 MiniCssExtractPlugin。 它把事情搞砸了。