webpack多页面打包通用方案

1.构建约定：

1. 所有入口文件按模块划分，并且都放在 src 下

2. 不同的模块放到不同的模块文件夹下，每个模块的入口文件都命名为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