webpack根據需求配置打包模組及打包指令

問題：一個系統包含多個功能模組，打包的時候如何根據設定 只選擇其中的部分模組

方法：不用系統需求設定不同的打包配置，步驟如下

1

package.json中新增打包指令（這裡的jdi是自定義的字串）

code：

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

2

vue.config.js配置檔案中使用‘NormalModuleReplacementPlugin’外掛，打包時動態替換資源

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

根據不同系統模組需求設定相應的路由檔案或元件檔案

4

在有引入router/index路由檔案的地方修改引入檔名

執行 npm run build 按照預設配置打包

執行 npm run build:jdi 按照jdi系統配置打包

注：上面的jdi 和 APP_TARGET字串都是自定義，莫得啥意義