Web 开发涉及到很多前端工具，例如 Webpack 工具通过模块化的方式处理静态资源，自动地构建前端项目；而 npm 包管理器则负责前端依赖的安装和管理。webpack-glob-entries 是一个比较实用的用于处理 Webpack 入口的 npm 包，本文将向你介绍webpack-glob-entries 的使用教程。
webpack-glob-entries 是什么？
webpack-glob-entries 是一个 npm 包，当我们配置 Webpack 的入口时，它能够使用通配符来实现自动加载入口，避免了手动一个一个输入每个入口文件的缺点，同时支持多种文件后缀格式，更方便地扩展。
安装和配置
安装 webpack-glob-entries 很简单，我们可以在终端使用 npm 安装，命令如下：
npm install webpack-glob-entries --save-dev
安装成功之后，我们需要在 Webpack 的入口处进行相应的配置。
1. 配置通配符
在配置 webpack 入口的时候，我们可以在路径中加入通配符，来代表这个文件夹中的所有某种特定类型的文件。比如，我们可以使用这个配置：
const entries = globEntries('./src/*/index.js')
const config = {
entry: entries,
...
}通配符 * 在上述代码片段中代表着一个名字为 index.js 的文件，且该文件在 src 文件夹的一级子目录中。为了提高代码的可读性，我们可以将通配符的文件名直接放在 globEntries 函数的参数中，例如：
const entries = globEntries('./src/*/{index,app}.js')
const config = {
entry: entries,
...
}这种配置方式的好处是，我们可以明确指定文件名只能是 index.js 或者 app.js，当项目比较大时，就会让人觉得非常的直观。
2. 导入模块
在使用 webpack-glob-entries 时，我们需要在 Webpack 配置文件的顶部导入它。在项目中可以使用以下语句：
const globEntries = require('webpack-glob-entries')3. 支持多种文件格式
以下是 webpack-glob-entries 支持的几种文件格式如下：
- '*.js' 普通的 JavaScript 文件。
- '*.jsx' React 组件。
- '*.vue' Vue 组件。
- '*.ts' TypeScript 文件。
- '*.tsx' TypeScript React 组件。
为了让 webpack-glob-entries 支持以上文件格式，我们需要先安装相应的 loader 。可以在终端中运行以下命令：
npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/preset-react vue-loader vue-template-compiler
在 Webpack 配置文件中配置以下代码：
-- -------------------- ---- -------
----- ------------ - -
---
------- -
------ -
-
----- -----------------
---- -
------- ---------------
-------- -
-------- --------------------- ----------------------
-
-
--
-
----- ----------
------- ------------
--
-
----- ----------
------- -----------
-
-
--
-
-------------- - ------------实例
-- -------------------- ---- -------
----- ----------- - -------------------------------
----- ------- - ----------------------------------------
----- ------ - -
------ --------
------- -
----- -------------------- ----------
----------- ----
--------- --------------
--
------- -
------ -
-
----- -----------------
---- -
------- ---------------
-------- -
-------- --------------------- ----------------------
-
-
--
-
----- ----------
------- ------------
--
-
----- ----------
------- -----------
-
-
--
-总结
webpack-glob-entries 能够让我们使用通配符的方式自动加载入口文件，轻松实现 Webpack 入口的配置，减少了手动输入的工作量。同时，webpack-glob-entries 还支持多种文件格式，大大提升了它的可扩展性。希望本文对你使用 webpack-glob-entries 有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671048dd3466f61ffdccc