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.