webpack——多页面打包通用方案

我们都知道在webpack的打包配置中，如果要配置webpack的打包入口，直接在配置文件exports的对象中的entry字段配置打包入口。

这个entry字段可以接收对象也可以是数组

但如果配置文件中的plugins插件数组中的htmlWebpackPlugins对象只有一个的话即打包出来的应用是单页面打包，如果是多个就是多页面打包

假如你像实现一个多页面打包的通用配置，应该如何配置呢？

目标：
src目录下为动态的打包入口，即在src目录每新增一个文件夹，打包入口就多一个；
每一个打包入口最后输出为一个html页面

即如果入口配置如下：

打包结果应该如下：

实现方式：
可通过glob库获取src下符合格式的文件路径即打包入口。

'use strict';

const glob = require('glob');
const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const smp = new SpeedMeasureWebpackPlugin