在现代前端开发中，Webpack 已经成为一个重要的工具。通过对代码进行模块化处理，Webpack 可以将多个 JS、CSS 等文件打包成一个或多个 Bundles，这极大地提高了页面的性能和代码的可维护性。然而，Webpack 的 Watch 模式默认只会监视入口文件及其依赖的文件，对于其他文件的变动需要手动重启 Webpack，这给开发带来了不便。为了解决这个问题，本文介绍一个 NPM 包，extra-watch-webpack-plugin，它能够让 Webpack 处于 Watch 模式下自动监视指定文件夹中的文件变化，并自动重启 Webpack。
安装
首先需要安装 extra-watch-webpack-plugin，可以通过 NPM 安装:
npm install extra-watch-webpack-plugin --save-dev
配置
在 Webpack 的配置文件中添加如下代码：
-- -------------------- ---- -------
----- ----------------------- - --------------------------------------
-------------- - -
-- --- ----
-------- -
--- -------------------------
----- -------- -------- -- -----------
------ --------- --------- -- ----------
-------- ------------------ -- ----------
--
--
-- --- ----
-其中，dirs 参数表示要监视的文件夹路径列表，files 参数表示要监视的文件路径列表，ignored 参数表示要忽略的文件路径列表。
当文件夹或文件发生变化时，extra-watch-webpack-plugin 会自动重启 Webpack。
示例代码
完整的示例代码如下：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------------- - --------------------------------------
-------------- - -
------ -----------------
------- -
----- ----------------------- --------
--------- -----------
--
-------- -
--- -------------------------
----- --------
------ -----------------
-------- ------------------
--
-
--以上示例配置中，extra-watch-webpack-plugin 会监视 src 文件夹和 css/main.css 文件的变化，并忽略 node_modules 文件夹下的所有文件。
总结
通过使用 extra-watch-webpack-plugin，我们可以让 Webpack 自动监视指定文件夹中的文件变化并自动重启，从而增强开发效率。本文介绍了安装 extra-watch-webpack-plugin、配置示例，并包含了示例代码，希望能对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/69250