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

webpack-dev-server hot reload not working

本文关键字：不起作用 重载 webpack-dev-server      更新时间：2023-09-26

我的文件结构是：

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

它构建并且似乎正在工作。 本地主机：8080 显示预期结果，但热重载不起作用。当我更改文件时，我可以在终端中看到正在重建，但浏览器中没有任何反应。我在配置中缺少某些内容吗？

对我有用的是在我的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时，文件系统中已有的静态文件会继续提供，而不是最新的热替换。当它在 html 文件中看到dist/bundle.js并且没有热替换它时webpack-dev-server似乎会感到困惑，即使webpack.config.js配置为该路径也是如此。

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

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

这样：

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

此页面上的选项都不适合我。将开发服务器部分更改为：

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

成功了。

对于 Webpack ^5.72.1

这对我有用，

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

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

--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

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

100%工作解决方案

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

  1. 在 webpack 配置的 "Output" 属性中包含 "publicPath" 键。"publicPath"应包含捆绑.js文件的路径，以便开发服务器知道您的捆绑.js文件中是否有任何更改，并将重新加载您的应用程序。

您的配置应如下所示 - 

output: {
   path: __dirname,
   publicPath:"/dist/js/",
   filename: './dist/js/bundle.js'
}
  1. 在配置文件中添加"开发服务器"选项 -
devServer:{
   contentBase:"/src/",
   inline:true,
   stats:"errors-only"
}

请注意，contentBase 应指向您放置索引.html文件的路径，其中包含您的脚本标记，在这种情况下，它将是"/src/">

  1. 最后，您必须确保索引中"脚本"标签的"src"属性.html指向捆绑包.js从"http：//localhost：port"开始，如下所示 -

<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在分隔窗口中

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

devServer: {
    hotOnly: true,
},

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

所有受苦的人： 不要忘记在公共路径之前斜杠： publicPath:’/assets/scripts/‘不publicPath:’assets/scripts/’由于路径字符串中的 1 个正斜杠而损失了三天

我增加了可以监视的最大文件更改数，这对我有用。我想对我来说的问题是文件太多。

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

源

试试这个：

在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
},

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

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

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

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

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

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

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

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

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

相关文章：