1. 前言
随着前端技术的不断发展，打包工具已经成为了前端开发的必备工具之一。而在一些较大的项目中，会有很多入口文件需要打包，这时候如果每个文件都手动去启动 webpack 来打包，势必会浪费我们大量的时间。为了解决这个问题，我们可以使用 webpack-entry-watcher 这个 npm 包来实现自动监测入口文件变化并自动打包。
2. webpack-entry-watcher 简介
webpack-entry-watcher 是一个基于 webpack 的命令行工具，它可以自动监测指定目录下的入口文件变化，并将这些入口文件一起打包输出到指定目录。
3. 安装和使用
3.1 安装
这个 npm 包需要全局安装。
--- ------- --------------------- --
3.2 使用
首先，在项目中新建一个入口文件目录，例如我们在项目根目录下新建了一个名为 entry 的目录。
在 entry 目录下新建多个入口文件，例如：
-- -------------- ------------------- ---------
-- ------------- -------------------- -- -- --------
然后，我们在命令行工具中执行以下命令：
--------------------- -- ----- -- ----
其中，-i 参数指定了入口文件目录，-o 参数指定了输出目录。执行这个命令后，webpack-entry-watcher 就会自动监测 entry 目录下的入口文件变化，并将这些文件打包输出到 dist 目录下。
如果我们修改了任何一个入口文件，webpack-entry-watcher 会自动重新打包输出到 dist 目录。
4. 参数解释
webpack-entry-watcher 除了上面提到的两个参数外，还有其他一些有用的参数。
4.1 --help
查看帮助文档：
--------------------- ------
4.2 -w, --watch
启用监听模式，当入口文件有变化时自动重新打包。
--------------------- -- ----- -- ---- --
4.3 --exclude
用于排除某些不需要参与打包的文件，可以使用 glob 模式。
排除所有以 test 开头的文件：
--------------------- -- ----- -- ---- --------- -------
4.4 --include
可以使用 glob 模式指定需要参与打包的文件，和 exclude 参数互斥。
只打包所有以 src 开头的文件：
--------------------- -- ----- -- ---- --------- ------
5. 总结
本文介绍了使用 webpack-entry-watcher 这个 npm 包来自动监测指定目录下的入口文件变化并自动打包的方法，并对使用过程中可能用到的参数进行了详细讲解。希望这篇文章能够对大家了解和学习 webpack-entry-watcher 有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005731781e8991b448e94af