概述
在前端开发中，Webpack 是现代前端开发技术不可或缺的一个必备工具。它可以将多个文件打包成一个或多个文件，实现模块化开发的同时，还可以进行代码压缩、图片优化等优化操作。但是，在每次修改代码后，都需要重新编译、构建文件，这是非常麻烦的。因此在这种情况下，我们需要一款自动监视文件变化并热加载的工具。本文将介绍如何使用 npm 包 webpack-hot-module-monitor 自动监视文件变化并热加载。
安装
首先，在安装 webpack-hot-module-monitor 前，需要先全局安装 webpack，安装命令如下：
npm install -g webpack
webpack-hot-module-monitor 是一个 npm 包，安装非常方便，直接在项目目录下运行以下命令即可：
npm install webpack-hot-module-monitor --save-dev
使用方法
一、配置 webpack
webpack 通过配置文件来进行自定义设置。在 webpack 的配置文件中加入 webpack-hot-module-monitor 的插件，示例代码如下：
-- -------------------- ---- ------- -------- - --- ------------------------------------- --- ------------------------------- --- ----------------------------- --- ----------------- ----- ---- --- --- ------------------------------------- ----- --------- ---------- --------- --------- ------------------ --- --- --------------------------------- ---------- ----- --------- - --------- ----- - --- --- ----- ---- ----- ----- ------------ ----- ----- ------ ------ ------------------ ----- ---- ----- -------- ----- ------ - ------- ----- - -- -展开代码
其中：
webpack.HotModuleReplacementPlugin()和webpack.NoEmitOnErrorsPlugin()是 Webpack 内置的热模块替换插件和错误模块插件。webpack.NamedModulesPlugin()可以使热重载的模块文件名更友好。webpack.DashboardPlugin()可以提供一个可视化的 Webpack 编译信息面板。可以在终端运行后查看。webpack.optimize.CommonsChunkPlugin()是用来将第三方库打包到一个独立的文件中的插件，以提升打包速度。webpack.optimize.UglifyJsPlugin()是用来压缩代码的插件。WHM()就是 webpack-hot-module-monitor 的插件。
二、配置 webpack-dev-server
webpack-dev-server 是一个基于 webpack 的开发服务器，可以自动监视代码更新并重新编译生成文件。在 webpack-dev-server 中需要注意的是：
首先，需要设置一下
output.publicPath属性，因为 webpack-dev-server 需要知道在哪里监听文件变化。其次，
devServer.hot属性需要设置为 true，它将开启 HMR 功能。最后，
devServer.historyApiFallback在前端开发常用的一种路由回退方案，可以保证路由变化时，不会返回 404 页面。
示例代码如下：
devServer: { compress: true, port: 8000, hot: true, historyApiFallback: true },
三、使用指南
在前端开发中，每次修改代码都需要重新编译构建很麻烦，使用 webpack-hot-module-monitor 就解决了这个问题。在使用时，只需要启动 webpack-dev-server 即可监听文件变化并自动刷新页面。在 HTML 代码中引入相应的 JavaScript 文件即可，示例代码如下：
<script src="vendor.bundle.js"></script> <script src="main.bundle.js"></script>
总结
至此，就介绍完了使用 npm 包 webpack-hot-module-monitor 进行自动监听文件变化并热加载的方法。webpack-hot-module-monitor 使用非常简单，在配置 webpack 和 webpack-dev-server 之后即可轻松启用热重载功能。同时，我们也需要注意开发中的其他细节，例如代码某些修改会导致页面流失的状态、某些语法不是热重载友好等问题都需要处理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f8f238a385564ab6f33
