一、配置有限多页应用

1.1 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'] 
    }) 
  ], 
}

1.2 问题

上述配置会导致重复打包：假设 app.js 和 admin.js 都引入了 vue.js，那么 vue.js 的代码既会打包进 app.js，也会打包进 admin.js。我们需要使用 optimization.splitChunks将共同依赖单独打包成 common.js(HtmlWebpackPlugin 会自动引入 common.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 = filenames.reduce((result,name)=>{
  (...result,[name]:`./src/pages/${name}.js`)
},{})
const plugins = filenames.map(name=>
  new HtmlWebpackPlugins({
    filename:name+'.html',
    chunks:[name]
  })
)

module.exports = {
  entry:{
    ...entries
  },
  plugins:{
    ...plugins
  }
}