npm 包 webpack-hot-module-monitor 使用教程-JavaScript中文网-JavaScript教程资源分享门户

npm 包 webpack-hot-module-monitor 使用教程

概述

在前端开发中，Webpack 是现代前端开发技术不可或缺的一个必备工具。它可以将多个文件打包成一个或多个文件，实现模块化开发的同时，还可以进行代码压缩、图片优化等优化操作。但是，在每次修改代码后，都需要重新编译、构建文件，这是非常麻烦的。因此在这种情况下，我们需要一款自动监视文件变化并热加载的工具。本文将介绍如何使用 npm 包 webpack-hot-module-monitor 自动监视文件变化并热加载。

安装

首先，在安装 webpack-hot-module-monitor 前，需要先全局安装 webpack，安装命令如下：

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

webpack-hot-module-monitor 是一个 npm 包，安装非常方便，直接在项目目录下运行以下命令即可：

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

使用方法

一、配置 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 页面。

示例代码如下：

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

三、使用指南

在前端开发中，每次修改代码都需要重新编译构建很麻烦，使用 webpack-hot-module-monitor 就解决了这个问题。在使用时，只需要启动 webpack-dev-server 即可监听文件变化并自动刷新页面。在 HTML 代码中引入相应的 JavaScript 文件即可，示例代码如下：

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

总结

至此，就介绍完了使用 npm 包 webpack-hot-module-monitor 进行自动监听文件变化并热加载的方法。webpack-hot-module-monitor 使用非常简单，在配置 webpack 和 webpack-dev-server 之后即可轻松启用热重载功能。同时，我们也需要注意开发中的其他细节，例如代码某些修改会导致页面流失的状态、某些语法不是热重载友好等问题都需要处理。

来源：JavaScript中文网，转载请联系管理员！本文地址：https://www.javascriptcn.com/post/60065f8f238a385564ab6f33