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

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

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

17 回复

配置入口和 webpack-html-plugin。应该可以


1.mpa + 多个 html-plugin
2.微前端

mpa 是啥

项目没在一个工程里

打包上传到 npm 或自建 npm，其他项目安装依赖就可以了

重点是，大项目引入后无需重新打包发布

打包成 umd 规范的，可以随便用了

有一种方案不知道是否可行：你的子模块打包成 Amodule.js 、Bmodule.js 、Cmodule.js 放在静态资源服务器上，子模块更新时直接替换同名文件，主项目用 script 标签引入这些 js 文件使用，打包发布后，子模块发生变化，主项目无需重新打包发布，只需要客户端清除缓存重新加载 js 就可以了。

我这么考虑过，不知道可不可行，目前知道这个弊端是需要必须提前知道子模块业务名

你和 15651980765 这位老哥应该一个意思吧

按你的需求 打包成多个 html 就可以了，但如果需要更复杂点 做成前端微服务 可以参考这个 https://single-spa.js.org/

感觉那样问题很多，比如使用统一的用户信息、状态等，另外三方库也会有多份儿

webpack 的 dll 包应该可以，把三个模块打成 prod 模式的 dll 然后包进去应该可以

刚随便百度了一下，webpack 的 dll 好像是解决三方库的

第三方库 用户信息共享 可以参考下 这篇文章 https://tech.meituan.com/2018/09/06/fe-tiny-spa.html

这个比较符合我的需求，但是有个巨大局限，就是必须已知有几个子项目及其信息

在Node.js项目中，使用Webpack打包后的模块可以在其他项目中通过几种方式引用。以下是一个基本的步骤和示例代码，展示如何实现这一点。

步骤

  1. 打包模块： 首先，确保你的Node.js项目已经配置好Webpack，并且已经打包生成了一个输出文件（通常是dist/main.js或类似的文件）。

  2. 配置package.json： 在你的打包项目的package.json中，确保main字段指向打包后的文件。例如：

    {
  "name": "your-module",
  "version": "1.0.0",
  "main": "dist/main.js",
  // 其他字段...
}

  3. 发布模块（可选）： 如果你想在其他项目中通过npm安装这个模块，可以将其发布到npm仓库。

  4. 在其他项目中引用： 使用npm或yarn安装模块后，可以在其他项目中通过require或import引用。

示例代码

假设你的打包模块名为your-module，并且已经发布到npm。

在其他项目中：

npm install your-module

然后在代码中引用：

const yourModule = require('your-module');

// 使用yourModule中的功能
yourModule.someFunction();

如果打包后的模块是UMD或CommonJS格式，这种方式通常可以正常工作。确保Webpack配置中的output部分正确设置了library和libraryTarget，以便模块可以被正确导出和引用。

希望这能帮助你在其他项目中成功引用Webpack打包后的Node.js模块。

回到顶部