我们接着上一篇文章react+webpack4.x搭建前端项目（五）多页面配置 来进行配置模块的单独打包方式（下边简称多app打包）

多app打包的意思是：多个模块单独打包，模块之间的资源互相不依赖，某一模块的资源打包在该模块下。这是和多页面最不大的不同，打包资源再多页面之间其实是公用的，bundle包资源也具有相互依赖的特征

先捋一下实现的思路，（基于上一篇react+webpack4.x多页面配置release-tag-0.0.3代码）

• 多app打包基于node的child_process模块创建子进程，在这个子进程执行打包任务，这样我们可以创建多个子进程执行打包任务，也就可以打包出多app
• 子进程执行打包命令的时候，注入参数区分是多app打包还是多页面打包
• 针对参数，动态生成webpack配置，进行不同方式打包

这里不具体讲述修改的代码细节了，值只贴一下关键代码。 详细代码请查看 react+webpack4.x多模块打包配置release-tag-0.0.4

新建build/build-apps.js多app打包脚本

使用child_process的child_process.execFileSync方法创建子进程执行打包任务

详细使用教程请看官方文档child_process使用文档

const child_process = require("child_process");
const { getModuleList } = require("./module-entry");
const path = require("path")
const filePath = path.resolve(__dirname,"./build.js")
const fs = require("fs")

// 支持自定是模块打包
const modules = process.argv[2];

if(modules){
    const moduleList = modules.split(",")
    // 动态遍历每个模块，对每个模块开启子进程单独进行打包
    for(let index=0;index<moduleList.length;index++){
        const moduleName = moduleList[index];
        try{
            if(fs.statSync(path.resolve(__dirname, `./../src/modules/${moduleName}/index.js`))){
                console.log(`开始打包<<<<<<${moduleName}<<<<<模块`);
                // 同步执行脚本文件
                const result = child_process.execFileSync("node",[filePath,"single-bundle",moduleName]) // 第三个参数是是否是多页面
                process.stdout.write(result + '\n\n');
            }
        }catch(error){
            console.log(`${moduleName}模块不存在`)
        }
    }
}else{
    // 打包默认的app
    console.log(`开始打包默认模块`);
    const result = child_process.execFileSync("node",[filePath,"single-bundle"]) // 第三个参数不传
    process.stdout.write(result + '\n\n');

    const moduleList = getModuleList();
    console.log(moduleList)
    // 动态遍历每个模块，对每个模块开启子进程单独进行打包
    for(let index=0;index<moduleList.length;index++){
        const moduleName = moduleList[index];
        
        console.log(`开始打包<<<<<<${moduleName}<<<<<模块`);
        // 同步执行脚本文件
        const result = child_process.execFileSync("node",[filePath,"single-bundle",moduleName]) // 第三个参数是是否是多页面
        process.stdout.write(result + '\n\n');
    }
}
复制代码

重要的四个方法

• getBuildEntry 获取打包入口
• getHtmlWebpackPluginList 获取打包模板文件的配置
• getPrdOutPutPath 获取打包目录
• getPublicPath 获取打包资源的注入前缀路径

// 获取webpack entry
function getBuildEntry(){
    const MODULE_NAME = process.env.MODULE_NAME  // 打包的模块
    const SINGLE_BUNDLE = process.env.SINGLE_BUNDLE;

    // 开发环境和多页面包括单页面
    if(utils.isDev() || SINGLE_BUNDLE == null){
        const moduleList = getModuleList();
    
        let entry = {};
        for(let index in moduleList){
            const moduleName = moduleList[index]
            entry[moduleName] = `./src/modules/${moduleName}/index.js`
        }
        // 添加默认打包入口文件
        entry["app"] = "./src/index.js"
        return entry
    }else if(isSingleBundle(SINGLE_BUNDLE)) {
        let entry = {}; // 单独打包
        if(MODULE_NAME){
            // modules下的入口
            entry[MODULE_NAME] = "./src/modules/" + MODULE_NAME + "/index.js";
        }else{
            // 默认的打包入口文件
            entry["app"] = "./src/index.js"
        }
        console.log(entry)
        return entry;
    }
}


// 获取htmlwebpackplugin列表
function getHtmlWebpackPluginList(options={}){

    const extractOptions = {
        minify: {
            removeComments: true,               //去注释
            collapseWhitespace: true,           //压缩空格
            removeAttributeQuotes: true         //去除属性引用
        },
    }
    const MODULE_NAME = process.env.MODULE_NAME  // 打包的模块
    const SINGLE_BUNDLE = process.env.SINGLE_BUNDLE;

    // 开发环境和多页面包括单页面
    if(utils.isDev() || SINGLE_BUNDLE == null){
        // 多页面打包
        const moduleList = getModuleList();
        const HtmlWebpackPluginList = [];
        for(let index in moduleList){
            const moduleName = moduleList[index];
            const HtmlWebpackPluginOptions = {
                filename: utils.resolve('./../dist/'+ moduleName+ '/index.html'), // html模板的生成路径
                template: utils.resolve("./../src/modules/" + moduleName + "/index.html"),//html模板
                inject: true, // true：默认值，script标签位于html文件的 body 底部
                chunks: [moduleName],  // 注入哪个名称bundel
            };
            if(options.extract){
                HtmlWebpackPluginOptions = Object.assign(HtmlWebpackPluginOptions,extractOptions)
            }
            HtmlWebpackPluginList.push(new HtmlWebpackPlugin(HtmlWebpackPluginOptions))
        }
        // 添加默认的输出模板文件
        HtmlWebpackPluginList.push(new HtmlWebpackPlugin(Object.assign({
            filename: utils.resolve('./../dist/index.html'), // html模板的生成路径
            template: 'index.html',//html模板
            inject: true, // true：默认值，script标签位于html文件的 body 底部
            chunks: ['app'],  // 注入哪个名称bundel
        },extractOptions)))
        return HtmlWebpackPluginList;
    }else if(isSingleBundle(SINGLE_BUNDLE)){
        // 多app打包
        const HtmlWebpackPluginList = [];
        if(MODULE_NAME){
            // modules目录下的打包模板文件配置
            HtmlWebpackPluginList.push(new HtmlWebpackPlugin(Object.assign({
                filename: utils.resolve('./../dist/'+ MODULE_NAME+ '/index.html'), // html模板的生成路径
                template: utils.resolve("./../src/modules/" + MODULE_NAME + "/index.html"),//html模板
                inject: true, // true：默认值，script标签位于html文件的 body 底部
                chunks: ['vendors',MODULE_NAME],  // 注入哪个名称bundel
            },extractOptions)));
        }else{
            // 添加默认的输出模板文件
            HtmlWebpackPluginList.push(new HtmlWebpackPlugin(Object.assign({
                filename: utils.resolve('./../dist/index.html'), // html模板的生成路径
                template: 'index.html',//html模板
                inject: true, // true：默认值，script标签位于html文件的 body 底部
                chunks: ['app'],  // 注入哪个名称bundel
            },extractOptions)))
        }
        if(options.extract){
            HtmlWebpackPluginOptions = Object.assign(HtmlWebpackPluginOptions,extractOptions)
        }
        return HtmlWebpackPluginList;
    }
    
}

// 打包的输出目录
function getPrdOutPutPath(){
    const MODULE_NAME = process.env.MODULE_NAME  // 打包的模块
    const SINGLE_BUNDLE = process.env.SINGLE_BUNDLE;

    // 开发环境和多页面包括单页面
    if(utils.isDev() || SINGLE_BUNDLE == null){
        return utils.resolve("../dist");
    }else if(isSingleBundle(SINGLE_BUNDLE)){
        // 多app打包
        if(MODULE_NAME){
            return utils.resolve(`../dist/${MODULE_NAME}`)
        }else{
            return utils.resolve("../dist");
        }
    }
}

// 打包资源的前缀路径
function getPublicPath(){
    const MODULE_NAME = process.env.MODULE_NAME  // 打包的模块
    const SINGLE_BUNDLE = process.env.SINGLE_BUNDLE;
    // 开发环境和多页面包括单页面
    if(utils.isDev() || SINGLE_BUNDLE == null){
        return "/"
    }else if(isSingleBundle(SINGLE_BUNDLE)){
        // 多app打包
        if(MODULE_NAME){
            return `/${MODULE_NAME}`
        }else{
            return `/`
        }
    }
}
复制代码

其它详细配置这里不多说了，详细的请看源码。

详细代码请查看 react+webpack4.x多模块打包配置release-tag-0.0.4

打包结果

新增"build-apps": "cross-env NODE_ENV=production node build/build-apps.js"命令

执行npm run build-apps

打包结果请看下图

这里解释一下

a目录输出包对应src/modules/a目录的代码

b目录输出包对应src/modules/b目录的代码

默认的包是src/index.js对应打包输出app

如果modules目录下没有任何模块那打包结果自然就没有a，b这些输出包了

有什么疑问可以多多交流，谢谢！