在前端开发中，webpack 是一个非常实用的工具。而 filewatcher-webpack-plugin 这个 npm 包则能够帮助开发者在文件发生变化时，快速更新 webpack 打包后的文件。
安装
要使用 filewatcher-webpack-plugin，需要先在项目中安装。
npm install filewatcher-webpack-plugin --save-dev
也可使用 yarn 安装：
yarn add filewatcher-webpack-plugin -D
使用
首先要在 webpack 配置中引入这个插件。
-- -------------------- ---- -------
----- ------------------------ - --------------------------------------
-------------- - -
-- ---
-------- -
--- --------------------------
--------------- --------- ---------- -----------
--------- ------------------- -
----------------- ---------- -----------
-
--
-
-在以上示例中，watchFileRegex 是你想监控的文件。这里我们指定了 js、html、和 scss 文件。onReload 则是需要触发的操作，在这里我们只是简单地将变化的文件打印到控制台上。
相关参数
watchFileRegex (Array): 用于指定需要监控文件的正则表达式（默认为 []）;onStart (Function): 监控开始时需要执行的操作，一般用于打印提示信息;onReady (Function): 监控任务准备好后需要执行的操作;onReload (Function): 文件发生变化时需要执行的操作，默认为通过 webpack 重新构建项目。
示例代码
下面是一个更详细的使用示例：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------
----- - ------------------ - - --------------------------------
----- -------------------- - -----------------------------------
----- ------------------------ - --------------------------------------
-------------- - -
------ -----------------
------- -
--------- -------------------
----- ----------------------- -------
--
------- -
------ -
-
----- ---------
---- ----------------------------- -------------
--
-
----- ----------
---- ----------------------------- ------------- --------------
--
-
----- --------
-------- ---------------
------- --------------
-
-
--
-------- -
--- -------------------
--------- ------------------
---
--- ---------------------
--- ----------------------
--------- -------------------
---
--- --------------------------
--------------- --------- ---------- -----------
--------- ------------------- -
----------------- ---------- -----------
-
--
-
--通过 filewatcher-webpack-plugin，我们可以在文件发生变化时快速更新打包后的文件，大大提高了开发效率。
总结
使用 filewatcher-webpack-plugin 可以方便地进行实时的文件监控。在开发工具链中，这个插件也是一个很实用的工具。
在实际使用中，我们可以根据自己的需要进行定制，从而达到更优秀的开发效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600566c881e8991b448e3257
