欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

webpack多入口打包配置

程序员文章站 2022-07-12 19:22:55
...

通常我们脚手架搭建的前端工程,webpack都是单入口配置,那么当工程复杂化,需要配置实现多页面入口要怎么做呢 ~ 捡重点配置项来


package.json:

通过执行不同模块的build命令 设置环境变量SYSETM 区分打包模块

"build:test1": "set SYSTEM=test1&set NODE_ENV=production&& webpack --progress",
"build:test2": "set SYSTEM=test2&set NODE_ENV=production&& webpack --progress",

多模块配置文件 config.js

module.exports = {
	"test1": {
		"title": "test1",
		"requestRoot": "http://127.0.0.1:4001/test1-web",
		"build": {
			"publicPath": "/test1-web/",
			"requestRoot": "/test1-web",
			"outputPath": "dist_build/test1/resources",
		}
	},
	"test2": {
		"title": "test2",
		"requestRoot": "http://127.0.0.1:4001/test2-web/mock",
		"build": {
			"publicPath": "/test2-web/",
			"requestRoot": "/test2-web",
			"outputPath": "dist_build/test2/resources",
		}
	}
}

webpack.config.js:

****public/js 下为多目标各入口文件

const project = process.env.SYSTEM;
const PRODUCTION = process.env.NODE_ENV === 'production';
var path = require('path');
var CleanWebpackPlugin = require('clean-webpack-plugin');
var systemConfig = require('./config')[project]; // 引入config.js该模块配置信息
if (PRODUCTION) {
	chunkHashTemplate = '.[chunkhash:8]';
}
var webpackconfig = {
	// 入口
	entry: {
		[project]: [
			'lib/dic',
			'lib/http',
			'theme/fonts',
			`./public/js/${project}`
		]
	},
	// 输出
	output: {
		path: path.join(__dirname, 'dist', 'static'),
		publicPath: '/static/',
		sourceMapFilename: 'map/[name].map',
		filename: `[name]${chunkHashTemplate}.js`
	}
}
// 分配各模块不通的输出路径
if (PRODUCTION) {
	console.log('production mode...')
	var buildConfig = systemConfig.build;
	webpackconfig.output.publicPath = buildConfig.publicPath,
	webpackconfig.output.path = path.join(__dirname, buildConfig.outputPath, 'static');
	webpackconfig.plugins[1] = new CleanWebpackPlugin([buildConfig.outputPath]);
}
module.exports = webpackconfig;

成果:

例如 npm run build:test1 执行test1入口文件的打包进程
最终依据不同的Npm命令,打包出dist_build/[project]/resources不同的压缩文件