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）。

如何支持无限多页面呢？

写点 Node.js 代码不就实现了么？

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

// 批量获取文件js路径
const filenames = fs.readdirSync('./src/pages')
  .filter(file => file.endsWith('.js')) // 获取js文件
  .map(file => path.basename(file, '.js')) // 返回对应文件路径

// 批量生成入口文件
const entries = filenames.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
  ],
};