本文主要是介绍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添加对应打包命令
这篇关于webpack 使用 NormalModuleReplacementPlugin 项目差异化打包的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!