以下对应的 webpack config：

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

module.exports = {
  entry: { // 指定 js 文件路径并赋名
    app: './src/app.js',
    admin: '.src/admin.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      chunks: ['app']  // 通过 chunks name 将 html 文件跟 entry 中指定的 js 文件绑定
    }),
    new HtmlWebpackPlugin({
      filename: 'admin.html',
      chunks: ['admin']
    })
  ]
}

但是，这样配置会有一个【重复打包】的问题：假设 app.js 和 admin.js 都引入了 vue.js，那么 vue.js 的代码既会打包进 app.js，也会打包进 admin.js。我们需要使用optimization.splitChunks将共同依赖单独打包成 common.js （HtmlWebpackPlugin 会自动引入 common.js）。

如何支持无限多页面呢？

写点 Node.js

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

const filenames = fs.readdirSync('./src/pages') // 获取 pages 里所有以 .js 结尾的文件
    .filter(file => file.endsWith('.js'))
    .map(file => path.basename(file, '.js')) // 将获取到的文件的 .js 去掉

const entries = filenames.reduce((result, name) => ( // 通过遍历生成包含多个 entry 的对象
  { ...result, [name]: './src/pages/${name}.js' }
),{})
const plugins = filenames.map((name) => // 通过遍历生成包含多个 plugin 的数组
  new HtmlWebpackPlugin({
    filename: name + '.html',
    chunks: [name]
  })
)

module.exports = {
  entry: { // 将 entries 对象扩展到 entry 中
    ...entries
  },
  plugin: [ // 将 plugins 数组扩展到 plugin 中
    ...plugins
  ]
}