webpack 使用 NormalModuleReplacementPlugin 项目差异化打包

情景：项目中包含多个模块，不同场景需要打包的模块不同，需要设置对应命令进行差异化打包。

 

解决方案：

使用 NormalModuleReplacementPlugin 插件判断打包场景，引入需要的模块文件

1：vue.config.js 中使用插件，设置识别字符串‘-APP_TARGET’

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

2：在需要区分引入的地方添加‘-APP_TARGET’

3：需要准备对应的组件

4：package.json添加对应打包命令