如果你已经有一定的Webpack开发经验，那么很可能已经使用过Webpack插件来处理项目中的文件，其中 webpack-watched-glob-entries-plugin 是一个非常实用的插件，它能够监视指定目录下的入口文件，并自动生成Entry配置，极大地简化了Webpack配置的复杂度。但是，如果你正在使用Typescript开发项目，很可能会发现在编译时存在一些问题，因为Typescript并不认识这个插件，这时我们需要使用 @types/webpack-watched-glob-entries-plugin 包来解决这个问题。在本文中，我将介绍如何使用 npm 包 @types/webpack-watched-glob-entries-plugin 来解决这个问题。
安装
在使用这个包之前，你需要先确保你已经安装了 Typescript 和 webpack-watched-glob-entries-plugin。
npm install typescript webpack webpack-watched-glob-entries-plugin --save-dev
然后再安装 @types/webpack-watched-glob-entries-plugin
npm install @types/webpack-watched-glob-entries-plugin --save-dev
使用
安装好依赖之后，我们需要在webpack配置文件中增加相应的配置。假设我们在项目中有一个 src 目录，其中包含 index.ts 和 admin.ts 两个入口文件，我们可以使用以下代码来配置webpack-watched-glob-entries-plugin插件：
-- -------------------- ---- -------
------ - -- ------- ---- ----------
------ - ------------------------ - ---- --------------------------------------
----- ------- --------------------- - -
-- ---
------ -------------------------------------------------- ------------------
-- ---
-------- -
-- ---
--- --------------------------
-- ----
---
-- ---
--
-- ---
--在入口文件中，我们需要使用导出语句将模块的默认导出暴露出来：
-- -------------------- ---- ------- -- -------- ------ - -------- - ---- ---------- ------ ------- --------- -- -------- ------ - ------------- - ---- ---------- ------ ------- --------------
示例代码
-- -------------------- ---- -------
------ - -- ------- ---- ----------
------ - ------------------------ - ---- --------------------------------------
----- ------- --------------------- - -
-- ---
------ -------------------------------------------------- ------------------
-- ---
-------- -
-- ---
--- --------------------------
-- ----
---
-- ---
--
-- ---
--
------ ------- -------结语
通过本教程，我们了解了如何使用 @types/webpack-watched-glob-entries-plugin 来处理Typescript项目中的webpack-watched-glob-entries-plugin插件。这个包的使用虽然很简单，但是对于使用Typescript开发的项目却具有重要的指导意义，因为它可以帮助我们更好地使用Webpack来管理源代码。希望本文能对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/types-webpack-watched-glob-entries-plugin