webpack之多页面应用打包通用方案（glob）

最新推荐文章于 2025-10-09 21:12:53 发布

原创

最新推荐文章于 2025-10-09 21:12:53 发布 · 2.8k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#glob #webpack #多页面打包

本文介绍了使用glob处理webpack多页面应用打包的方法。首先需要安装glob，然后将代码按项目需求拆分到src目录下的不同文件夹，如index和search，并确保入口文件名为index。最后，在webpack的生产环境配置文件webpack.prod.js中进行相应的配置调整。

使用glob来处理

1、安装glob

npm i glob -D

2、项目处理，将代码放在src目录下，例如此处就拆分为两个项目，分别为index和search，index和search文件夹下入口文件必需使用index作为文件名

3、在webpack.prod.js配置文件下进行如下主要操作，代码中有一些无关的插件

'use strict';

const glob = require('glob')
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

// 多页面打包
const setMPA = () => {
    const entry = {};
    const htmlWebpackPlugins = [];

    const entryFiles = glob.sync(path.join(__dirname, './src/*/index.js'))

    Object.keys(entryFiles).map(index =>