前言
在前端开发中，使用 webpack 打包工具已经是大势所趋，而 webpack 的插件生态也因此得到了大量的发展和维护，其中 webpack-html-plugin-reload 这个插件可以说是非常常用的一个，它的作用是在 html 文件中引入打包后的 js 脚本，并且实现了浏览器自动刷新的功能，这对于前端开发人员而言可以大大提高工作效率，本篇文章就是介绍这个 npm 包的使用方法。
安装
首先，在项目根目录下安装 webpack-html-plugin-reload，可以使用 npm 或 yarn 进行安装。
npm install webpack-html-plugin-reload --save-dev yarn add webpack-html-plugin-reload -D
使用
在 webpack 打包配置文件中增加 html-webpack-plugin 插件：
-- -------------------- ---- -------
----- ----------------- - -------------------------------
-------------- - -
---
-------- -
--- -------------------
--------- ----------------
---
---
--
---
-在 package.json 文件中增加 scripts 命令：
"scripts": {
...
"dev": "webpack serve --config webpack.config.dev.js --hot --host 127.0.0.1 --port 9000",
...
},注意：--hot 需要安装 webpack-dev-server。
在 index.html 文件中加入以下代码：
<script type="text/javascript" src="/__webpack_dev_server__/webpack-dev-server.js"></script> <script type="text/javascript" src="/webpack-dev-server.js"></script>
这段代码的作用是启用浏览器自动刷新。如果不需要这个功能，可以不添加这段代码。
接下来，在 webpack 打包配置文件中增加 webpack-html-plugin-reload 插件：
-- -------------------- ---- -------
----- ----------------- - -------------------------------
----- ----------------------- - --------------------------------------
-------------- - -
---
-------- -
--- -------------------
--------- ----------------
---
--- -------------------------
------- ----
---
---
--
---
-在以上代码中，第一个参数为插件的配置对象，其中的 reload 属性表示是否开启自动刷新功能。
至此，webpack-html-plugin-reload 的使用就完成了，最终的配置文件内容如下：
-- -------------------- ---- -------
----- ----------------- - -------------------------------
----- ----------------------- - --------------------------------------
-------------- - -
---
-------- -
--- -------------------
--------- ----------------
---
--- -------------------------
------- ----
---
---
--
---
-示例代码
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- -------------- ---- ------ ------ --------------- ------- ------ ---- --------------- ---- -------- --- ------- ---------------------- -------------------------- ------- ---------------------- ------------------------------------------------------------- ------- ---------------------- -------------------------------------- ------- -------
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<div>Hello World!</div>,
document.getElementById('app')
);总结
以上就是 webpack-html-plugin-reload 这个 npm 包的使用方法，它的作用是在 html 文件中引入打包后的 js 脚本，并且实现了浏览器自动刷新的功能，大大提高了开发效率。希望本文对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671048dd3466f61ffdcfa