webpack根据需求配置打包模块及打包指令

问题:一个系统包含多个功能模块,打包的时候如何根据设置 只选择其中的部分模块

方法:不用系统需求设置不同的打包配置,步骤如下

1

package.json中添加打包指令(这里的jdi是自定义的字符串)

webpack根据需求配置打包模块及打包指令_第1张图片

code:

"build:jdi": "vue-cli-service build --jdi",

2

vue.config.js配置文件中使用‘NormalModuleReplacementPlugin’插件,打包时动态替换资源

webpack根据需求配置打包模块及打包指令_第2张图片

code:

plugins: [
  new webpack.NormalModuleReplacementPlugin(
	/(.*)-APP_TARGET(\.*)/,
	function(resource) {
	  let str = process.argv.slice(3)
	  let appTarget = str.join()
	  appTarget = appTarget === '--jdi' ? '-jdi' : ''
	  resource.request = resource.request.replace(/-APP_TARGET/, `${appTarget}`);
	}
  )
]

具体用法参考: https://webpack.html.cn/plugins/normal-module-replacement-plugin.html

3

根据不同系统模块需求设置相应的路由文件或组件文件

webpack根据需求配置打包模块及打包指令_第3张图片

4

在有引入router/index路由文件的地方修改引入文件名

webpack根据需求配置打包模块及打包指令_第4张图片

执行 npm run build 按照默认配置打包

执行 npm run build:jdi 按照jdi系统配置打包

注:上面的jdi 和 APP_TARGET字符串都是自定义,莫得啥意义

 

 

你可能感兴趣的:(前端,webpack,区分模块打包)