webpack 按需打包vue項目

需求

1：公司項目頁面定製化賣給不一樣的甲方，有的客戶要A,B,C模塊，有的要C,D模塊，有的要A,D模塊。如何按需打包給對方？

實現原理

1：下面以vue-cli3 構建的項目爲例子來了解 核心邏輯其實就是構建不一樣的router.js來區分，客戶1的router裏含有A,B,C，客戶2的router裏含有C,D便可。 咱們能夠想到把router.js分紅好幾個不一樣的路由。 那麼問題來了。入口main.js引用了router.js 也要每次都切換router.js來打包，這樣main.js的代碼並很差維護。

解決方案

咱們能夠一樣把main.js 拆成 main_CustomerA.js 和 main_CustomerB.js，而後使用webpack的特性mode來讀取不一樣的main.js

首先在package.json所在的根目錄下新建 .env.CustomerA 和 .env.CustomerB 兩個文件 分別寫上代碼：

VUE_PROJECT_NAME = "CustomerA"
NODE_ENV = "production"
複製代碼

VUE_PROJECT_NAME = "CustomerB"
NODE_ENV = "production"
複製代碼

而後在vue.config.js中寫入

module.exports = {
  outputDir: 'dist',
  pages: {
    index: {
      // page 的入口
      entry: 'src/main_' + process.env.VUE_PROJECT_NAME +'.js',
    },
  },
複製代碼

在package.json的script中寫入

"build_CustomerA": "vue-cli-service build --mode CustomerA",
    "build_CustomerB": "vue-cli-service build --mode CustomerB",
複製代碼

咱們會發現當執行 build_CustomerA的時候，mode爲CustomerA。webpack會去找.env.CustomerA文件。將其中的內容覆蓋掉 process.env 的對象字面量。而後 entry指向到main_CustomerA.js 下。main_CustomerA.js指向 router_CustomerA.js。 router_CustomerA.js中含有A,B,C頁面，則打包的時候，只有A,B,C頁面進入了最終的dist文件夾。實現了對頁面級的按需打包。 也方便測試進行按需測試。