webpack多入口打包配置

通常我们脚手架搭建的前端工程，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不同的压缩文件