V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
duanzs
V2EX  ›  Node.js

webpack 打包后怎么在其它项目中引用

  •  
  •   duanzs · 2019-07-09 12:11:06 +08:00 · 6242 次点击
    这是一个创建于 1996 天前的主题,其中的信息可能已经有所发展或是发生改变。

    假设我有个大项目(前端 vue ),需要拆分成两三个小项目甚至更多个小项目。 然后需求是,将小项目 ABC 用 webpack 分别打包成 moduleA.js 、moduleB.js 、moduleC.js (或者其他类型文件或包),然后将这三个包引入到大项目 project 中(放到 static 文件中?可以动态 import ),然后就可以使用或路由到小项目中的页面、函数等等

    16 条回复    2019-07-10 11:30:38 +08:00
    Sir814
        1
    Sir814  
       2019-07-09 12:56:41 +08:00
    配置入口和 webpack-html-plugin。应该可以
    happyeveryday
        2
    happyeveryday  
       2019-07-09 13:35:42 +08:00
    1.mpa + 多个 html-plugin
    2.微前端
    duanzs
        3
    duanzs  
    OP
       2019-07-09 13:43:37 +08:00
    @happyeveryday mpa 是啥
    duanzs
        4
    duanzs  
    OP
       2019-07-09 13:44:12 +08:00
    @Sir814 项目没在一个工程里
    noe132
        5
    noe132  
       2019-07-09 14:01:14 +08:00
    打包上传到 npm 或自建 npm,其他项目安装依赖就可以了
    duanzs
        6
    duanzs  
    OP
       2019-07-09 14:11:23 +08:00
    @noe132 重点是,大项目引入后无需重新打包发布
    randyo
        7
    randyo  
       2019-07-09 14:27:15 +08:00
    打包成 umd 规范的,可以随便用了
    15651980765
        8
    15651980765  
       2019-07-09 14:31:19 +08:00
    @duanzs 有一种方案不知道是否可行:你的子模块打包成 Amodule.js 、Bmodule.js 、Cmodule.js 放在静态资源服务器上,子模块更新时直接替换同名文件,主项目用 script 标签引入这些 js 文件使用,打包发布后,子模块发生变化,主项目无需重新打包发布,只需要客户端清除缓存重新加载 js 就可以了。
    duanzs
        9
    duanzs  
    OP
       2019-07-09 17:44:30 +08:00
    @15651980765 我这么考虑过,不知道可不可行,目前知道这个弊端是需要必须提前知道子模块业务名
    duanzs
        10
    duanzs  
    OP
       2019-07-09 17:45:16 +08:00
    @randyo 你和 15651980765 这位老哥应该一个意思吧
    MrJeff
        11
    MrJeff  
       2019-07-09 21:28:41 +08:00
    按你的需求 打包成多个 html 就可以了,但如果需要更复杂点 做成前端微服务 可以参考这个 https://single-spa.js.org/
    duanzs
        12
    duanzs  
    OP
       2019-07-10 09:17:16 +08:00
    @MrJeff 感觉那样问题很多,比如使用统一的用户信息、状态等,另外三方库也会有多份儿
    jinliming2
        13
    jinliming2  
       2019-07-10 09:35:46 +08:00 via iPhone
    webpack 的 dll 包应该可以,把三个模块打成 prod 模式的 dll 然后包进去应该可以
    duanzs
        14
    duanzs  
    OP
       2019-07-10 09:42:59 +08:00
    @jinliming2 刚随便百度了一下,webpack 的 dll 好像是解决三方库的
    MrJeff
        15
    MrJeff  
       2019-07-10 10:42:37 +08:00
    @duanzs 第三方库 用户信息共享 可以参考下 这篇文章 https://tech.meituan.com/2018/09/06/fe-tiny-spa.html
    duanzs
        16
    duanzs  
    OP
       2019-07-10 11:30:38 +08:00
    @MrJeff 这个比较符合我的需求,但是有个巨大局限,就是必须已知有几个子项目及其信息
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2357 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 16:09 · PVG 00:09 · LAX 08:09 · JFK 11:09
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.