webpack差异化打包NormalModuleReplacementPlugin

项目需求需要根据不同的使用场景进行差异话打包，一些文件分属不同的包使用。
我这里是Vue CLI项目主要使用webpack的NormalModuleReplacementPlugin插件。将route文件，提供你需要的版我这里用route/index_Version_A.js和route/index_Version_B.js替换。在main.js和需要引入route/index.js的地方引入route/index__APP_TEST。在webpack打包是会根据环境变量去分别加载不同的route文件。你可以在route文件中加载对应需要的组件就基本实现需求。同样的也可以对其他的文件进行替换，eg: test/index.vue =>test/index_Version_A.vue和test/index_Version_B.vue。

configureWebpack: config => {
	const appTarget = process.env.NODE_ENV === 'dev'? 'Version_A' : 'Version_B';
	config.plugins.push(new webpack.NormalModuleReplacementPlugin(/(.*)_APP_TEST(\.*)/,
        function (resourse) {
           resourse.request = resourse.request.replace(/APP_TARGET/, `${appTarget}`);
       })
   );

腾讯云较为官方的介绍改插件：NormalModuleReplacementPlugin 允许你用 newResource 替换与 resourceRegExp 匹配的资源。如果 newResource 是相对路径，它会相对于先前的资源被解析。如果 newResource 是函数，它将会覆盖之前被提供资源的请求。
腾讯云介绍链接: link.