webpack 如何配置多页应用？

这是对应的 webpack config

const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  entry: {
    app: './src/app.js',
    admin: './src/admin.js',
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      chunks: ['app']
    }),
    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)
参考文章

如何支持无限多页面？

遍历页面文件所在的文件夹，读取所有js文件名

const HtmlWebpackPlugin = require('html-webpack-plugin')
const fs = require('fs')
const path = require('path')
const filenames = fs.readdirSync(./src/pages)
  .filter(file => file.endsWith('.js'))
  .map(file => path.basename(file, '.js'))
const entries = filename.reduce((result, name) => (
  {...result, [name]: `./src/pages/${name}.js`}
), {})
const plugins = filenames.map((name) => 
  new HtmlWebpackPlugin({
    filename: name + '.html',
    chunks: [name]
  })
)
module.exports = {
  entry: {
    ...entries
  },
  plugins: [
    ...plugins
  ]
}