React + Webpack5 + dva单工程拆成多个子工程共用node_modules——项目编译问题

问题描述：

        公司开发了一个BI项目，刚开始功能模块比较少，所以所有模块都在一个工程，后面功能越做越多，项目越来越大变得很臃肿、打包速度慢、每次修复跟大模块不相干的功能都要整个打包、编译出来的js文件大。所以将原有项目进行拆分，拆分后的结构大致是这样的：

 即所有独立模块拆出来作为一个子工程，放在packages下面，然后所有子工程共用最外层的配置及node_modules（不然每个子项目要一个node_modules，挺占磁盘空间），每次启动/打包的时候，选择要启动的子模块就好了：

但是启动/打包时会有几个问题：

        1.非选中的子项目也一起编译了

        2.其他模块要是有报错，启动的那个项目也会受影响

        3.拖慢启动/打包的速度

        4.前端多了不必要的js加载 

解决方案：

        利用webpack的IgnorePlugin插件，实现拆出来的每个子工程“真正”独立

const webpack = require('webpack')

new webpack.IgnorePlugin({ // 忽略不是当前选中的包
      checkResource(resource) {
        return (reg && reg.test(resource)) || false
      },
    })

正则匹配返回true表示忽略

获取正则（比如我选择daac-bi，那home跟editor就是需要忽略的，得到的正则应该是这样的 -> new RegExp('.*/(home|editor)($|/.*)')）：

const packages = process.env.packages.split("*") // process.env.packages -> home*editor
const reg = getRegExp(packages)

const getRegExp = packages => {
  const entryLen = Object.keys(entry || {}).length
  if (entry && entryLen > 1) {
    let ignoreProject = Object.keys(entry).filter(key => !(packages && packages.find(p => key === p))).join('|')
    let reg = new RegExp(`.*/(${ignoreProject})($|/.*)`)
    log(`工程${ignoreProject}将不参与编译^_^`, 'success')
    return reg
  }
  return null
}