webpack 配置多页面

1、主要是根据 entry 配置项来搭配 html-webpack-plugin 生成

对 webpack.config.js 配置变形如下，注意 multiplePagePlugins 方法的动态引入插件

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

/**
 * 根据 configs 的 entry 配置项
 * 来动态添加 new html-webpack-plugin 的个数
 */
const multiplePagePlugins = (configs) => {
  const plugins = []
  const keys = Object.keys(configs.entry)
  keys.forEach((item) => {
    plugins.push(
      new HtmlWebpackPlugin({
        // 配置模版路径
        template: path.resolve(__dirname, '../public/index.html'),
        filename: `${item}.html`,
        chunks: [item]
      })
    )
  })
  return plugins
}

const configs = {
  /**
   * 打包模式配置
   * development 一般为开发环境，打包的代码不压缩
   * production 一般为生产环境，打包的代码会被压缩
   */
  mode: "development",
  /**
   * 入口文件配置
   * 当前为单入口文件配置
   */
  entry: {
    index: path.resolve(__dirname, '../src/main.js'),
    list: path.resolve(__dirname, '../src/list.js'),
    detail: path.resolve(__dirname, '../src/detail.js')
  },
  /**
   * 打包文件输出配置
   */
  output: {
    // 打包文件的位置
    path: path.resolve(__dirname, '../dist'),
    /**
     * 打包文件的名称
     * [name] 对应入口文件的 key 值(entrt 为对象形式下)，默认为 main
     * [hash] 当前打包的 hash 值
     * [ext] 文件的拓展名
     */
    filename: '[name].js'
  },
  /**
   * 打包时，使用到的插件
   */
  plugins: []
}

configs.plugins = multiplePagePlugins(configs)

module.exports = configs