随着前端项目变得越来越复杂，我们需要更好的工具来帮助我们自动化任务。其中一个常见的任务是监听文件的变化，以便在文件更改时重新构建应用程序。
在本文中，我们将介绍一个名为 "file-watcher-glob-webpack-plugin" 的 npm 包，它可以帮助我们监听符合特定模式的文件，并触发自定义操作。
安装
可以使用 npm 进行安装：
npm install --save-dev file-watcher-glob-webpack-plugin
用法
要使用 file-watcher-glob-webpack-plugin，需要将其添加到您的 webpack 配置中。以下是一个简单的示例：
-- -------------------- ---- -------
----- ----------------- - --------------------------------------------
-------------- - -
-- ---
-------- -
--- -------------------
-- -------
--
-
-参数
构造函数接受一个选项对象，可以配置以下参数：
watchPaths(string[]|string): 要观察的路径或路径模式数组eventName(string): 在监听到文件更改时要触发的自定义事件名称，默认为 "file-watch"watchInterval(number): 文件更改检查间隔时间（毫秒），默认为 1000。
示例
以下示例中，我们将监听所有 SCSS 文件的更改，并在文件更改时运行一个自定义构建脚本。
-- -------------------- ---- -------
----- ----------------- - --------------------------------------------
----- ------------ - -------------------------
-------------- - -
-- ---
-------- -
--- -------------------
----------- --------------
---------- -------------
-------------- ----
--
--
-- ---
---------- -
-- ---
---------- ------- -
-------------------------------- ------------------ ------
-- -------
---------------------- ----- ---- -- -
-- -- ---- ----
----------------------- ----------
-------------------------- --- -------------
---------------
---
-
-
-在此示例中，我们将监听所有 SCSS 文件的变化，并在每次更改时调用 "npm run build:sass" 脚本来重新构建 应用程序。
当文件更改时，file-watcher-glob-webpack-plugin 会触发名为 "build-sass" 的自定义事件。我们在 webpack devServer 的 "after" 钩子函数中添加了一个路由来响应该事件。
现在，我们可以通过访问"http://localhost:8080/build-sass" 来重新构建 Sass，而不必手动运行脚本。
结论
file-watcher-glob-webpack-plugin 是一个非常有用的 webpack 插件，可以帮助我们轻松地监听文件更改并触发自定义操作。在本文中，我们学习了如何使用这个插件，并给出了一个示例，演示了如何在 Sass 文件更改时自动构建应用程序。
希望这篇文章对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d8a81e8991b448db4b0