webpack 多应用处理方案

最新推荐文章于 2023-02-28 09:46:45 发布

小肥喵大人

最新推荐文章于 2023-02-28 09:46:45 发布

阅读量1.7k

点赞数 3

分类专栏： web web前端React.js web前端js

本文链接：https://blog.csdn.net/u013224660/article/details/86543621

版权

本文介绍了如何使用webpack处理前端多应用的构建问题，通过模块化的页面工程组织，结合生产环境和开发环境的不同配置，实现一对一的打包目标。强调这是一种处理方式，鼓励读者自行研究与分享。

摘要由CSDN通过智能技术生成

webpack多页面处理

方案说明

方案说明

前端工程多数是使用webpack来开发，那么问题来了，是一个前端工程就得搭建一个webpack项目吗？我是觉得没这必要，因为很多是固定不变的，如编译… 只是前端工程对应的业务不相同而已！

先展示一下打包完毕的内容

kejian
由上图可见，页面工程按模块区分，并放入pages下，最终编译出来对应的目录处于build下，且相关资源也在该目录中，参照下图，看一下other里面包括了什么？
在这里插入图片描述
可以看到有入口文件，切割后（按需加载）的资源js等，这就是一个前端工程该用的资源了！

生产环境

看一下生产环境相关的js，

// 命令
npm run build

script/build.js
config/webpack.config.prod.js

可以进入 webpack.config.prod.js 中看，发现目录相关的配置，如入口文件，打包之后的目录都在里面配置好了！针对的是一对一！
那么可以考虑把以下代码作出相应的调整

// module.exports = { ... } 调整为
module.exports = function (pack) {
   
	return {
   
		... //这里就是上面的之前导出的对象
		// 添加 entry, 入口文件
		entry: {
   
			...
			main: paths.resolveApp(`src/pages/${
     pack}/index.js`)
		},
		// 修改 output.path
		output: {
   
			path: paths.resolveApp(`build/${
     pack}`)
		}
	}
}
// 目的是为了多次获取配置，并根据包名决定编译路径，以完成多个模块的分离打包

可以看见上面的 paths.resolveApp 不存在，进入 config/paths.js 加入下面代码

module.exports = {
   
	...,
	resolveApp
}

接下来要调整 build.js

'use strict';
/*
	1.先读取命令参数，识别当前要打包哪一模块
	2.模块参数不存在，那么就扫描pages下的目录，并查看该目录结构是否拥有相关文件
	命令： npm run build 打包pages下的所有目录且存在index.js入口文件的模块
	      npm run build name=other 先检查该模块是否合理，只编译该模块
*/

// Do this as the first thing so that any code reading it knows the right env.
process.env.BABEL_ENV = 'production';
process.env.NODE_ENV = 'production';

// Makes the script crash on unhandled rejections instead of silently
// ignoring them. In the future, promise rejections that are not handled will
// terminate the Node.js process with a non-zero exit code.
process.on('unhandledRejection', err => {
   
  throw err;
});

// Ensure environment variables are read.
require('../config/env');

const path = require('path');
const fs = require('fs-extra');
const chalk = require('chalk');
const webpack = require('webpack');
const bfj = require('bfj');
const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
const getConfig = require('../config/webpack.config.prod');
const paths = require('../config/paths');
const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
const printBuildError = require('react-dev-utils/printBuildError');

const measureFileSizesBeforeBuild =
  FileSizeReporter.measureFileSizesBeforeBuild;
/* const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
const useYarn = fs.existsSync(paths.yarnLockFile); */

// These sizes are pretty large. We'll warn for bundles exceeding them.
/* const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024;
const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024; */

const isInteractive = process.stdout.isTTY;

// Process CLI arguments
const argv = process.argv.slice(2);
const writeStatsJson = argv.indexOf('--stats') !== -1;

// We require that you explicitly set browsers and do not fall back to
// browserslist defaults.
const {
    checkBrowsers } = require('react-dev-utils/browsersHelper');

packProgress();

// 打包流程
async function packProgress() {
   
  console.