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不同的压缩文件
上一篇: Webpack配置多入口