前言
在开发前端项目时，随着代码量的增加，手动刷新页面就变得很麻烦。那么如何解决这个问题呢？一个比较好的方式就是使用自动刷新工具。在众多的自动刷新工具中，Webpack 自带的 watch 功能可以实现文件变化时自动编译，但是需要手动刷新浏览器。这时候，我们可以使用 webpack-watch-livereload-plugin 这个 npm 包，它可以在文件变化后自动刷新浏览器。
什么是 webpack-watch-livereload-plugin
webpack-watch-livereload-plugin 是一个 webpack 插件，它可以在 webpack-watch 模式下实现浏览器自动刷新，同时也支持 react-hot-loader。该插件的原理是基于 livereload 实现的。
如何使用 webpack-watch-livereload-plugin
使用 webpack-watch-livereload-plugin 只需要在 webpack 配置文件中进行如下配置即可：
-- -------------------- ---- -------
-- ----
--- ---------------------------- - -------------------------------------------
-- ----
--- ------------- - -
-- ---
------ -----
-------- -
-- ----
--- ------------------------------
-
-其实只需要在 webpack 的 plugins 中实例化该插件即可，非常简单。此时，webpack 就会自动监听文件的变化并进行编译，同时浏览器也会自动刷新。
安装使用示例
我们可以通过以下步骤安装该插件并使用：
- 创建一个新项目，在项目根目录下执行
npm init初始化该项目 - 安装 webpack 和 webpack-cli:
npm install --save-dev webpack webpack-cli - 安装 webpack-watch-livereload-plugin:
npm install --save-dev webpack-watch-livereload-plugin - 在项目根目录下创建一个 src 目录，并在该目录下创建一个入口文件 main.js，内容为：
// 这里只是一个简单的例子
document.write('Hello World!');- 在项目根目录下创建 webpack 配置文件 webpack.config.js，内容为：
-- -------------------- ---- -------
--- ---------------------------- - -------------------------------------------
-------------- - -
------ ----------------
------- -
--------- -----------
--
------ -----
-------- -
--- ------------------------------
-
--- 在项目根目录下执行
webpack命令进行编译 - 在浏览器中打开 index.html，你将看到页面上显示的是 “Hello World!”。然后，修改 main.js 中的内容为：
document.write('Hello World! (modified)');- 保存 main.js 文件后，会发现浏览器自动刷新，显示的内容变成了 “Hello World! (modified)”。这就是 webpack-watch-livereload-plugin 的自动刷新效果。
总结
使用 webpack-watch-livereload-plugin 可以大大提高前端项目的开发效率。当然，该插件还有很多高级用法，但是此处不再赘述。希望本篇文章可以对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedcaf4b5cbfe1ea0612514