我们接着上一篇文章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
打包结果请看下图
QQ截图20200318170028.png
这里解释一下
a目录输出包对应src/modules/a目录的代码
b目录输出包对应src/modules/b目录的代码
默认的包是src/index.js对应打包输出app
如果modules目录下没有任何模块那打包结果自然就没有a，b这些输出包了
有什么疑问可以多多交流，谢谢！
