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

作者：嚣张的胖头鱼
链接：https://juejin.im/post/5dda82fff265da7de713449a
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。