1.构建约定：
- 所有入口文件按模块划分，并且都放在 src 下
-
不同的模块放到不同的模块文件夹下，每个模块的入口文件都命名为index.js
image.png
2.利用glob 动态根据规则匹配符合条件的所有文件
glob可以允许你通过使用特定的规则找到预制匹配的文件
安装glob
npm install --save-dev glob
使用glob
const path = require('path')
const glob = require('glob')
const pathList = glob.sync(path.join(__dirname, './src/*/index.js'))
console.log(pathList)
输出结果：
image.png
3.根据glob返回的内容设置entry入口和htmlwebpackplugin数组
const entryObj = {}
const htmlArr = []
pathList.forEach(pathStr => {
let tag = pathStr.match(/src\/(.+)\/index\.js/)[1]
console.log(tag)
if (tag) {
entryObj[tag] = pathStr
htmlArr.push(
new HtmlWebpackPlugin({
template: path.join(__dirname, `src/${tag}/index.html`),
filename: `${tag}.html`,
chunks: [`${tag}`]
}))
}
})
配置到webpack中
{
mode: 'development',
entry: entryObj,
plugins: htmlArr
}
4.实际效果截图
image.png
