什么是 find-webpack？
find-webpack 是一个 npm 包，它可以帮助开发者在 webpack 打包过程中搜索指定目录下的文件和文件夹。
如何安装 find-webpack？
通过 npm 可以很方便地安装 find-webpack 包，打开终端或 CMD，输入如下命令：
npm install find-webpack --save-dev
如何使用 find-webpack？
1. 引入 find-webpack 包
在 webpack 配置文件中引入 find-webpack 包，并赋值给变量 findWebpack。
const findWebpack = require('find-webpack');2. 设置需要查找的目录
在 webpack 配置文件中设置需要查找的目录，其中 __dirname 表示当前文件所在的目录。
const searchDir = `${__dirname}/src/components`;3. 使用 findWebpack 方法
在 HtmlWebpackPlugin 插件中使用 findWebpack 方法，将查找到的文件和文件夹作为模板参数传入。
plugins: [
new HtmlWebpackPlugin({
template: findWebpack(`${searchDir}/**/*.html`),
}),
new MiniCssExtractPlugin({
filename: '[name].[chunkhash].css',
}),
],findWebpack 方法参数说明
findWebpack 方法有两个参数。
第一个参数
第一个参数为目录路径的匹配格式，可以使用通配符 * 匹配任何字符，使用 ** 匹配目录结构。
// 多级目录结构下的所有 html 文件
findWebpack(`${searchDir}/**/*.html`)
// 下级目录结构下的所有 jpg 文件
findWebpack(`${searchDir}/*.jpg`)第二个参数
第二个参数为匹配格式以外的配置项。
exclude
exclude 配置项用于排除一些文件和文件夹。
findWebpack(`${searchDir}/**/*.html`, {
exclude: [
'node_modules',
'components/test.html',
],
})callback
callback 配置项允许开发者对查找到的文件和文件夹做进一步的操作。
findWebpack(`${searchDir}/**/*.jpg`, {
callback: (path) => {
console.log(`查找到的图片路径：${path}`);
},
})示例代码
下面是一个完整的示例代码：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------
----- -------------------- - -----------------------------------
----- ----------- - ------------------------
----- --------- - ------------------------------
-------------- - -
------ -
----- ----------------
--
------- -
----- ----------------------- --------
--------- ------------------------
--
-------- -
--- -------------------
--------- --------------------------------------
---
--- ----------------------
--------- -------------------------
---
--
--总结
find-webpack 是一个十分实用的 npm 包，它可以帮助开发者在 webpack 打包过程中更加灵活地定位文件和文件夹，提高开发效率。在开发中，如果需要搜索指定目录下的文件和文件夹，不妨尝试使用 find-webpack 包。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedae85b5cbfe1ea0610e5d