vuejs / vue-cli

🛠️ webpack-based tooling for Vue.js Development
https://cli.vuejs.org/
MIT License
29.75k stars 6.32k forks source link

我需要对pages中的模块独立打包成多个dist包,并用模块名作为dist包名。并且assets+index.html的webpack打包后的结构 #7452

Open a1005380483 opened 6 months ago

a1005380483 commented 6 months ago

What problem does this feature solve?

我正在尝试由2.5的vue项目升级为2.7的vue项目。

  1. 以前的项目都是单独模块打包dist,并且由公司内部部署平台直接识别运行。包括后端也是根据模块来调用的(具体配置我并不清楚)。因此我并不能使用vue.config.js pages提供的单项目多页面入口的方式。
  2. 由于某些公司内部sdk兼容性问题,暂不支持vue3,只支持node14
  3. 模块太多也是我无法接受的原因之一,几十个将近一百个模块,之前都是通过list,直接webpack一次读取一次打包多个项目直到list结束。我也并不能同其他人一样每次都独立运行一个build方法独立打包一次。
  4. 我尝试安装了webpack5.90.0,但由于其他模块升级上来等一系列兼容问题,我不知道为什么webpack>5 的要求,居然5.90.0不通过校验。每次安装5.90.0都会报不通过webpack>5的要求。而且14.17.3版本的node安装webpack5.90会报 npm ERR! cb() never callback.不管是兼容性还是环境,都不满足此要求。 尝试:
  5. 当我在chainWebpack或configureWebpack试图修改output.path时,会报错Configuration Error: Avoid modifying webpack output.path directly. Use the "outputDir" option instead. 可我看文档上写的如果你需要基于环境有条件地配置行为,或者想要直接修改配置,那就换成一个函数 (该函数会在环境变量被设置之后懒执行)。该方法的第一个参数会收到已经解析好的配置。在函数内,你可以直接修改配置,或者返回一个将会被合并的对象.明明提示是懒执行函数,却修改不了path
  6. 我想使用copy将文件复制到相对应的模块名文件夹下。但我不确定把公共部分及私有部分复制进去之后路径是否能正确识别,dist包是否能正确运行。 最终用户体验: 一次性打包多个模块,用模块名作为dist包名,[projectName]/ 下有static文件夹和index.html(与webpack打包后的dist包一致)

What does the proposed API look like?

  1. 可以在pages/configureWebpack/chainWebpack中直接修改/间接修改一些配置的方式。我想哪怕得到一个二次确认也好,而不是直接禁止修改。
  2. 或者在vue.config.js中,可以直接传入一个打包数组,module.export = defineConfig([]),这样也可以。
  3. 我并不会但我想这不是一个好的方案:提供一个build可传入pages模块名的方法,然后vue.config.js根据传入的模块数组,分别单独打包项目