解决 Webpack 热更新失效的问题-FunTeaLearn Online Web Tutorials

Webpack 是当前前端工程化中最流行的打包工具之一，通过它我们可以将多个文件打包成一个文件，并对这个文件进行代码压缩、合并、优化等操作，以减少网络请求次数，提高网站性能。热更新则是 Webpack 中一项非常重要的功能，它可以在我们修改代码后自动刷新页面，以进行实时预览，提高开发效率。但是，有时候我们会发现热更新失效了，本文将介绍如何解决这个问题。

热更新失效的原因

热更新失效一般是因为 Webpack 自动监控文件变化的方式不太准确，导致无法正确的更新。这个错误通常是由以下原因引起的：

在 entry 属性中添加了 HTML 文件或者使用了绝对路径
在入口文件中写了错误的代码
在模块化代码中引入了模块级别的状态变量
在模块化代码中使用了 class

解决方案

解决热更新失效的问题一般有以下几种方案：

1. 关闭热更新

如果你真的无法解决热更新失效的问题，你可以尝试关闭热更新，然后每次修改代码后手动刷新页面。关闭热更新的方式如下：

// webpack.config.js
module.exports = {
  // ... 
  devServer: {
    hot: false, // 关闭热更新
  },
  // ...
};

2. 修复代码中的错误

在入口文件以及被入口文件引入的模块中，有可能存在错误的语法或者不支持热更新的使用方式，导致热更新失效。解决这个问题的方法是找到并修复代码中的错误。

3. 使用模块热更新

Webpack 中提供了模块热更新(Hot Module Replacement)功能，它是一种更加精确的热更新方式，只会更新被修改到的模块，而不是整个页面。使用模块热更新的方式如下：

-- -------------------- ---- -------
-- -----------------
-------------- - -
  -- --- 
  ---------- -
    ---- ----- -- -----
  --
  -------- -
    --- ------------------------------------- -- -------
  --
  -- ---
--

4. 配置文件增加 ignore 参考

通过配置文件增加 ignore 参考，使得 Webpack 自动忽略掉一部分文件更新。例如，你只需要更新代码中的 .js 文件，而不需要更新 HTML 文件，那么在配置文件中增加以下代码：

// webpack.config.js
module.exports = {
  // ...
  watchOptions: {
    ignored: /node_modules|dist|.html$/,
  },
  // ...
};

这里的正则表达式 /node_modules|dist|.html$/ 表示忽略 node_modules、dist 文件夹和以 .html 结尾的文件。

示例代码

为了更好的理解上述方案，下面的示例代码将项热更新被禁用的情况下，手动关闭和启用热更新，并分别讲解相应的代码片段。

-- -------------------- ---- -------
-- -----------------
----- ------- - -------------------

-------------- - -
  ------ ----------------- -- ----
  ------- -
    ----- --------- - --------
    --------- -----------
  --
  ---------- -
    ------------ --------- -- - ---- ---------------
    ---- ------ -- -----
  --
  ------- -
      ------ - -- -------
          -
              ----- --------
              -------- ----------------------------------
              ---- -
                  ------- ---------------
                  -------- -
                      -------- ---------------------
                  -
              -
          -
      -
  --
  -------- -
    --- ------------------------------------- -- -------
  --
--

这里我们关闭了模块热更新，并启用了 babel 转义支持。在开发过程中，我们找到以下代码并尝试进行调整：

const btn = document.querySelector('#button');

btn.addEventListener('click', () => {
    const wrapper = document.createElement('div');
    wrapper.innerHTML = 'Hello Webpack';
    document.body.appendChild(wrapper);
})

当你进行修改并保存时，发现浏览器页面并没有触发自动刷新。

首先，我们尝试手动刷新页面。然后，我们再尝试启用模块热更新：

-- -------------------- ---- -------
-- -----------------
----- ------- - -------------------

-------------- - -
  ------ ----------------- -- ----
  ------- -
    ----- --------- - --------
    --------- -----------
  --
  ---------- -
    ------------ --------- -- - ---- ---------------
    ---- ----- -- -----
  --
  ------- -
      ------ - -- -------
          -
              ----- --------
              -------- ----------------------------------
              ---- -
                  ------- ---------------
                  -------- -
                      -------- ---------------------
                  -
              -
          -
      -
  --
  -------- -
    --- ------------------------------------- -- -------
  --
--

修改代码后，运行 npm run dev，再次在浏览器中访问 http://localhost:8080，修改后的内容应该实现了非常明显的变化。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67d685b7a941bf7134c4e983

解决 Webpack 热更新失效的问题