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文件夹。实现了对页面级的按需打包。 也方便测试进行按需测试。