我們接著上一篇文章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這些輸出包了
有什么疑問可以多多交流，謝謝！
