如何用 Webpack 构建支持 HMR 的 Vue 项目
Vue 是一个前端开发非常流行的框架，而 Webpack 则是构建工具之一。它们都是非常重要的工具，要想成为一名优秀的前端工程师，对它们的运用和优化非常重要。在这篇文章中，我们将讨论如何使用 Webpack 构建支持 HMR（热更新）的 Vue 项目。
HMR 有什么优势？
首先，让我们了解一下 HMR 的概念。HMR 是热模块替换的意思，它可以在运行时动态更新代码，减少刷新的需要，从而提高开发效率，同时也能改善体验感。比如，我们经常会遇到在修改代码后，需要等待每次编译完成才能看到效果的问题，这时候 HMR 就可以派上用场了。
打开页面后，当代码发生改变时，Webpack 将会与浏览器建立 WebSocket 连接，实时传输新的代码。这种方式是非常便于开发的，特别是对于大型项目而言。
开始构建 Vue 项目
首先，我们需要创建一个新的 Vue 项目。如果你使用的是 Vue CLI，你可以通过选择 webpack 模板来构建它。可以通过 npm 指令来安装 Vue CLI 并初始化项目。
$ npm install -g vue-cli $ vue init webpack vue-project
创建完成后，安装以下必要的依赖：
$ cd vue-project $ npm install vue-loader vue-template-compiler webpack-dev-server webpack-merge@4.2.2
如果你的项目中使用了 Vuex 或 Vue Router 等插件，还需要相应地安装它们。
配置 Webpack
我们需要为 Webpack 创建一个新的配置文件，并将其命名为 webpack.config.js。在这个文件中，我们需要添加如下配置：
-- -------------------- ---- -------
----- ---- - ---------------
----- ------- - ------------------
----- ----- - ------------------------
----- ----------------- - --------------------------------
----- ------------- - ------------------------ -
----- --------------
-------- ------------------
-------- -
--- ------------------------------------
--
---------- -
---- -----
------------ -------------------- -----------
----- -----
----------- ----
------------------- -----
------- ----
-
--
-------------- - -------------其中，webpack-merge 插件是用来合并不同的 Webpack 配置信息的。我们还需要创建一个基础配置文件，名为 webpack.config.base.js。这个文件包含了一些基本配置，我们在 webpack.config.js 中调用这些配置。
-- -------------------- ---- -------
----- ---- - ---------------
----- - --------------- - - ---------------------
-------------- - -
------ ----------------
------- -
----- ----------------------- -----------
--------- ------------
----------- ---
--
------- -
------ -
-
----- ---------
------- -------------
-------- --------------
--
-
----- --------
------- ---------------
-------- --------------
-
-
--
-------- -
--- -----------------
-
-通过这些配置，我们已经完成了基础配置，现在我们需要添加其他的配置来支持 HMR。
Webpack HMR 配置
我们现在需要通过添加 HMR 的相关配置来启用它。Webpack 提供了一个模块增量热替换插件 HMR Plugin，我们可以通过添加以下配置来启用它：
-- -------------------- ---- -------
----- ------- - ------------------
-
----- --------------
-------- ------------------
-------- -
--- ------------------------------------
-
-在这个代码片段中，我们添加了 webpack 插件 webpack.HotModuleReplacementPlugin。这是用来启用 HMR 的必需插件。
当 Webpack 页面是启用 HMR 的，我们还需要通过修改 JavaScript 和样式表的加载器来支持这项特性。在我们的配置文件中，我们需要添加以下字段：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-- ---
-
----- ---------
---- ---------------- ------------- ------------------
-------- --------------
-
-
-
-这段代码提供了一些规则来捕获 .css 文件并将它们编译到 JavaScript 中。同时，我们还需要修改 Vue 组件的加载方式以支持 HMR，我们需要在 vue-loader 的配置中添加 hotReload: true：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- ---------
------- -------------
-------- -
---------- ----
-
-
-
-
-开发环境准备就绪
完成了以上配置后，我们的 Vue 项目已经准备好支持 HMR 了。我们可以使用 npm run dev 命令来启动开发服务器。
"scripts": {
"dev": "webpack-dev-server --config webpack.config.js --open --hot"
}这条指令将通过访问 http://localhost:3000/ 来打开我们的项目。尝试修改代码，看看它会自动更新！现在，你可以充分利用 HMR 来提高你的代码质量和开发效率了。
结论
基于所述的配置信息，我们已经可以为一个 Vue 项目启用 HMR 的功能了。你可以用它来加速你的 Vue 项目开发流程，同时提高编写代码的体验。慢慢实践，不断提升技巧，让我们的开发效率更上一层楼。
示例代码：
webpack.config.js：
-- -------------------- ---- -------
----- ---- - ---------------
----- ------- - ------------------
----- ----- - ------------------------
----- ----------------- - --------------------------------
----- ------------- - ------------------------ -
----- --------------
-------- ------------------
-------- -
--- ------------------------------------
--
---------- -
---- -----
------------ -------------------- -----------
----- -----
----------- ----
------------------- -----
------- ----
-
--
-------------- - -------------webpack.config.base.js：
-- -------------------- ---- -------
----- ---- - ---------------
----- - --------------- - - ---------------------
-------------- - -
------ ----------------
------- -
----- ----------------------- -----------
--------- ------------
----------- ---
--
------- -
------ -
-
----- ---------
------- -------------
-------- --------------
--
-
----- --------
------- ---------------
-------- --------------
-
-
--
-------- -
--- -----------------
-
-package.json：
-- -------------------- ---- -------
-
------- --------------
---------- --------
-------------- -- ------ ---------
--------- ----- ---- -------------------
---------- -----
---------- -
------ ------------------- -------- ----------------- ------ -------
-------- -------- -------- ------------------------
------- ------- ----- -------- --- -------
------- ----- -------- -- ---- ----------- -- ---- --
--
--------------- -
-------- ----------
------ --------
--
------------------ -
--------------- ---------
------------- ----------
--------------- ---------
--------------- ---------
--------------------------------- ----------
------------------- ---------
----------------------- ----------
----------------- ----------
-------- ---------
------------------------------- ---------
---------------------- ---------
------------- ---------
--------- ----------
------------------------- ---------
---------------------------- ---------
---------------- ---------
--------------------- ---------
----------------------- ---------
--------------------- ---------
------------------------ ---------
------------------------- ---------
----------------------- ---------
---------- ----------
------------------------------ ---------
-------------- ----------
--------------------------------- ---------
---------------------- ----------
------------------------ ----------
----------------- ---------
--------- ---------
--------- ---------
---------- ---------
--------------- ----------
-------------------------- ---------
------------- ---------
------------- ----------
------------------------ ---------
---------- ----------
-------------------------- ----------
------------------------- ---------
--------------------- ---------
---------------- --------
-
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67076fc1d91dce0dc8688083