webpack之globglob用来匹配、查找并处理各种后缀的文件。前端工程化的过程中，不可避免地会用 Node.js

glob用来匹配、查找并处理各种后缀的文件。前端工程化的过程中，不可避免地会用 Node.js 来读取文件，例如想找到 src 目录下所有 js 和 jsx 文件，代码应该怎么写呢？首先安装依赖包：

yarn add glob
const glob = require('glob') 
const files = glob.sync('src/**/*.js{,x}') 
console.log(files)

* ：匹配0或多个字符 glob.sync('src/*.js') 匹配src目录下的所有以.js结尾的文件
? ：匹配一个字符（不能为空） glob.sync('src/a?.js') 匹配src目录下所有文件名长度为2个字符的js文件。例如：能匹配 js/ab.js，不能匹配 js/a.js。
[...] ：匹配该路径段中在指定范围内的一个字符 glob.sync('src/a[0-3].js') 匹配src目录下以a开头，第二个字符为0-3之间（包括0和3）的js文件。若改为 ['src/[^ab].js']，则匹配 src/c.js，不匹配 src/cd.js、js/ac.js

注意：不能组合，只能匹配其中一个字符。另外，如果指定范围的首字符是 ! 或 ^，则匹配不在指定范围内的一个字符

基础语法

分隔符和片段

概念：分隔符是 /，通过 split('/') 得到的数组每一项是片段。

示例：

src/index.js 有两个片段，分别是 src 和 index.js
src/**/*.js 有三个片段，分别是 src、** 和 *.js

单个星号

概念：单个星号 * 用于匹配单个片段中的零个或多个字符。

示例：

src/*.js 表示 src 目录下所有以 js 结尾的文件，但是不能匹配 src 子目录中的文件，例如 src/login/login.js
/home/*/.bashrc 匹配所有用户的 .bashrc 文件

需要注意的是，* 不能匹配分隔符 /，也就是说不能跨片段匹配字符。

问号

概念：问号 ? 匹配单个片段中的单个字符。

示例：

test/?at.js 匹配形如 test/cat.js、test/bat.js 等所有3个字符且后两位是 at 的 js 文件，但是不能匹配 test/flat.js
src/index.?? 匹配 src 目录下以 index 打头，后缀名是两个字符的文件，例如可以匹配 src/index.js 和 src/index.md，但不能匹配 src/index.jsx

中括号

概念：同样是匹配单个片段中的单个字符，但是字符集只能从括号内选择，如果字符集内有 -，表示范围。

示例：

test/[bc]at.js 只能匹配 test/bat.js 和 test/cat.js
test/[c-f]at.js 能匹配 test/cat.js、test/dat.js、test/eat.js 和 test/fat.js

惊叹号

概念：表示取反，即排除那些去掉惊叹号之后能够匹配到的文件。

示例：

test/[!bc]at.js 不能匹配 test/bat.js 和 test/cat.js，但是可以匹配 test/fat.js
!test/tmp/**' 排除 test/tmp 目录下的所有目录和文件

扩展语法

基础语法非常简单好记，但是功能非常局限，为了丰富 glob 的功能，衍生了下面三种扩展语法：

两个星号

概念：两个星号 ** 可以跨片段匹配零个或多个字符，也就是说 ** 是递归匹配所有文件和目录的，如果后面有分隔符，即 **/ 的话，则表示递归匹配所有目录（不含隐藏目录）。

示例：

/var/log/** 匹配 /var/log 目录下所有文件和文件夹，以及文件夹里面所有子文件和子文件夹
/var/log/**/*.log 匹配 /var/log 及其子目录下的所有以 .log 结尾的文件
/home/*/.ssh/**/*.key 匹配所有用户的 .ssh 目录及其子目录内的以 .key 结尾的文件

大括号

概念：匹配大括号内的所有模式，模式之间用逗号进行分隔，支持大括号嵌套，支持用 .. 匹配连续的字符，即 {start..end} 语法。

示例：

a.{png,jp{,e}g} 匹配 a.png、a.jpg、a.jpeg
{a..c}{1..2} 匹配 a1 a2 b1 b2 c1 c2

注意：{} 与 [] 有一个很重要的区别：如果匹配的文件不存在，[] 会失去模式的功能，变成一个单纯的字符串，而 {} 依然可以展开。

小括号

概念：小括号必须跟在 ?、*、+、@、! 后面使用，且小括号里面的内容是一组以 | 分隔符的模式集合，例如：abc|a?c|ac*。

示例：

?(pattern|pattern|pattern)：匹配0次或1次给定的模式
*(pattern|pattern|pattern)：匹配0次或多次给定的模式
+(pattern|pattern|pattern)：匹配1次或多次给定的模式
@(pattern|pattern|pattern)：严格匹配给定的模式
!(pattern|pattern|pattern)：匹配非给定的模式
*(pattern|pattern|pattern)：匹配多个 pattern 中0或任意多个（pattern可相互组合） glob.sync('src/*(a|b|c).js') 匹配src目录下的 a.js、ab.js、abc.js、ba.js，不匹配 abcd.js（也就是说：只允许匹配出现在范围内的字符）
+(pattern|pattern|pattern)：至少匹配多个 pattern 中的一个。与*(pattern|pattern|pattern) 不同的是，它必须1个及以上，不能为空。 glob.sync('src/+(a|b)b.js') 匹配src目录下的 ab.js、bb.js、ababab.js，不能匹配 abcd.js（也就是说：只允许匹配出现在范围内的字符），也不能像 src/*(a|b)b.js 那样匹配 b.js。
?(pattern|pattern|pattern)：匹配多个 pattern 中0或1个（精确匹配，不可以组合） glob.sync('src/?(a|b).js') 匹配src目录下的 a.js、b.js，不匹配 ab.js
@(pattern|pattern|pattern)：匹配多个 pattern 中的任意一个（即不可以组合，且不能为空或大于1个）与 ?(pattern|pattern|pattern) 区别是不可为空

glob.sync('src/@(a|b)b.js') 匹配src目录下的 ab.js、bb.js，不匹配 b.js、abb.js、abc.js。

!(pattern|pattern|pattern)：匹配（完全且精确地匹配，且不可组合）不符合任何模型之一的字符 glob.sync('src/!(a|b).js') 匹配src目录下的 aa.js、ab.js、ba.js、c.js 不匹配 a.js、b.js

使用场景

webpack 多页面应用自动打包配置

在一个 webpack 项目中，假如我们有多个入口，每个入口都有一个 index.html 模板和 index.js 文件，而且这个入口是动态变化的，不希望每增加一个入口就改 webpack.config.js 配置文件，应该怎么办呢？

此时可以约定在 src 下面创建的文件夹，只要里面有 index.js，我们就把它当做一个入口文件进行打包：

glob自动打包代码：

const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')
const glob = require('glob')

// 动态生成 entry 和 html-webpack-plugin
function getMpa() {
  const entry = {}, htmlPlugins = []
  const files = glob.sync('src/*/index.js')
  files.forEach((file) => {
    const filename = file.split('/')[1]
    entry[filename] = path.join(__dirname, file)
    htmlPlugins.push(
      new HtmlWebpackPlugin({
        template: path.join(__dirname, `src/${filename}/index.html`),
        filename: `${filename}.html`,
        chunks: [filename],
      })
    )
  })
  return { entry, htmlPlugins }
}
const mpa = getMpa()

// 动态的配置文件
module.exports = {
  entry: mpa.entry,
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name]-[hash:6].js',
  },
  plugins: [...mpa.htmlPlugins],
}

参考文档：glob语法的的使用