vue项目分业务模块打包？

Z时代
2024-02-13
分类：IT

现在有一个需求：产品有许多模块，公司卖给客户其中的两三个模块，不想在打包的时候把其他模块打进去，怎么实现这种功能？这段时间查的有根据路由，在webpack打包时走其中的某些路由，没有引用的就不会被打包进去，但是项目是用的动态路由做的。

有没有相似需求的大佬，给个意见。

回答：

现在采用的是webpack的IgnorePlugin插件，把不需要的模块匹配路径忽略掉就可以了

项目结构
views
-- asset
-- budget
-- supervision
-- ...
每个目录都是一个大模块

/** build为true则表示该模块需要打包 */
let modules_all = [
  {name: '资产管理', module: 'asset', build: true},
  {name: '预算管理', module: 'budget', build: true},
  {name: '监督中心', module: 'supervision', build: true},
]
let config = {
  modules: modules_all.filter(item => !item.build), // 需要忽略的模块
}
const modules = config.modules;
function genIgnoreReg(modules){
  let all = modules.map(item => item.module);
  return new RegExp(`(${all.join('|').replace(/\|$/,'')})`);
}module.exports = genIgnoreReg(modules);

vue.config.js

const buildModules = require('./src/plugins/buildModules')
...
configureWebpack: {
    plugins: [
        new webpack.IgnorePlugin(buildModules, /views$/)
    ]}