webpack 使用 NormalModuleReplacementPlugin 项目差异化打包

差异化打包策略：NormalModuleReplacementPlugin在项目中的应用

最新推荐文章于 2024-06-06 06:17:27 发布

原创最新推荐文章于 2024-06-06 06:17:27 发布 · 2.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #webpack

前端同时被 2 个专栏收录

39 篇文章

订阅专栏

Vue

11 篇文章

订阅专栏

本文介绍了如何在Vue项目中利用NormalModuleReplacementPlugin插件根据不同的打包场景引入相应的模块，通过设置识别字符串-APP_TARGET实现模块选择，并提供了配置示例、引入方式和打包命令的指导。

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

解决方案：

使用 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’