vue项目webpack根据不同环境打包不同的文件

需求简介：不同的区域获取不同的功能权限目录，打包的时候不将全部前端文件打包进去，各个地区有哪些功能 就打包哪些功能的文件，分区域部署。

思路： 1.构建一个下webpack的环境变量，再在npm run build --XX 带不同参数
2.这样不同的npm 命令就会有不同的环境变量
3.router.js 里再根据环境变量来注册路由

步骤

1.首先 用.env文件配置全局环境变量，下图举例一个环境变量，之后根据环境变量参数来打包。


2 .webpack NormalModuleReplacementPlugin插件配置 config.js文件

  configureWebpack: config => {
    const plugins = []
    plugins.push(
      new webpack.NormalModuleReplacementPlugin(/.*dev\./,
      function (resourse) {
          var str = appTarget.replace("\"","").replace("\"","");
          resourse.request = resourse.request.replace(/dev/, `${str}`);
      }),
    )
    config.plugins = [...config.plugins, ...plugins]
  },

3.配置package.json文件

4.配置不同的路由文件

5. 打包命令：npm run build --test

题外话：
有此需求的其实还可以看一下阿里针对微前端开发的一款框架 【乾坤（qiankun）】
将独立子应用程序编入到主系统中。
保证子应用相互隔离等等
github：https://github.com/umijs/qiankun