前言
在前端开发中，使用 webpack 打包工具已经是大势所趋，而 webpack 的插件生态也因此得到了大量的发展和维护，其中 webpack-html-plugin-reload 这个插件可以说是非常常用的一个，它的作用是在 html 文件中引入打包后的 js 脚本，并且实现了浏览器自动刷新的功能，这对于前端开发人员而言可以大大提高工作效率，本篇文章就是介绍这个 npm 包的使用方法。
安装
首先，在项目根目录下安装 webpack-html-plugin-reload，可以使用 npm 或 yarn 进行安装。
--- ------- -------------------------- ---------- ---- --- -------------------------- --
使用
在 webpack 打包配置文件中增加 html-webpack-plugin 插件：
----- ----------------- - -------------------------------
-------------- - -
---
-------- -
--- -------------------
--------- ----------------
---
---
--
---
-在 package.json 文件中增加 scripts 命令：
---------- - --- ------ -------- ----- -------- --------------------- ----- ------ --------- ------ ------ --- --
注意：--hot 需要安装 webpack-dev-server。
在 index.html 文件中加入以下代码：
------- ---------------------- ------------------------------------------------------------- ------- ---------------------- --------------------------------------
这段代码的作用是启用浏览器自动刷新。如果不需要这个功能，可以不添加这段代码。
接下来，在 webpack 打包配置文件中增加 webpack-html-plugin-reload 插件：
----- ----------------- - -------------------------------
----- ----------------------- - --------------------------------------
-------------- - -
---
-------- -
--- -------------------
--------- ----------------
---
--- -------------------------
------- ----
---
---
--
---
-在以上代码中，第一个参数为插件的配置对象，其中的 reload 属性表示是否开启自动刷新功能。
至此，webpack-html-plugin-reload 的使用就完成了，最终的配置文件内容如下：
----- ----------------- - -------------------------------
----- ----------------------- - --------------------------------------
-------------- - -
---
-------- -
--- -------------------
--------- ----------------
---
--- -------------------------
------- ----
---
---
--
---
-示例代码
--------- ----- ------ ------ ----- ---------------- -------------- ---- ------ ------ --------------- ------- ------ ---- --------------- ---- -------- --- ------- ---------------------- -------------------------- ------- ---------------------- ------------------------------------------------------------- ------- ---------------------- -------------------------------------- ------- -------
------ ----- ---- -------- ------ -------- ---- ------------ ---------------- ---------- ------------- ------------------------------ --
总结
以上就是 webpack-html-plugin-reload 这个 npm 包的使用方法，它的作用是在 html 文件中引入打包后的 js 脚本，并且实现了浏览器自动刷新的功能，大大提高了开发效率。希望本文对大家有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600671048dd3466f61ffdcfa