Vue 项目之 Webpack 中 DevServer 的模块热替换（3）

「这是我参与11月更文挑战的第28天，活动详情查看：2021最后一次更文挑战」

1. 框架中的 HMR

• 有一个问题：在开发其它项目时，我们是否需要经常手动去写入 module.hot.accept 相关的 API 呢？
  • 比如开发 Vue、React 项目，我们修改了组件，希望进行热更新，这个时候应该如何去操作呢？
  • 事实上社区已经针对这些问题有很成熟的解决方案了；
  • 比如 Vue 开发中，我们使用 vue-loader，该 loader 支持 Vue 组件（.vue 文件）的 HMR，提供开箱即用的体验；
  • 比如 React 开发，有 React Hot Loader，实时调整 React 组件（目前 React 官方已经弃用了，改成使用 react-refresh）；

下面我们就来演示下 Vue 实现 HMR 功能。

我们前面说过，在 Webpack 中，.vue 文件是通过 vue-loader 来帮助我们进行加载的，而 vue-loader 在处理 .vue 文件的过程中就会将我们刚才写的指定模块开启热替换功能的代码添加进 .vue 文件加载出来的 js 代码中。

比如我们修改 src/vue/App.vue 中的代码：

你会发现，修改了 .vue 文件中的有关内容后，浏览器并不会刷新整个页面，而是只更新了 App.vue 模块中的内容，并且控制台中又打印了一大块的信息，其实这就是 vue-loader 在帮我们做模块热替换。这就意味着，以后如果我们只是修改了某个组件中的内容，默认情况下，vue-loader 已经帮助我们对这个组件实现了模块热替换，就不需要我们手动去指定了。

所以，在真实开发中，我们通常不需要写类似于下面的代码自己来指定需要开启热替换功能的模块：

if (module.hot) {
  module.hot.accept('./js/element.js', () => {
    console.log('element 模块发生更新了');
  });
}

当然，有些特殊的场景（并不多，比如在 Vuex 官网中，有个地方就专门说到关于模块热替换可以写这样的代码，但不写，影响也不是很大），你写出来可能更好一点。