Webpack 5 打包实战sample-monorepo 如何优雅输出 UMD 包并保留源码映射【免费下载链接】sample-monorepoSample monorepo setup with npm workspaces and typescript project references项目地址: https://gitcode.com/gh_mirrors/sa/sample-monorepo在工程化日益复杂的今天Webpack 5 打包早已不只是把 JS 揉成一团那么简单。本文以开源项目 sample-monorepo 为例带你完整走一遍它如何基于 npm workspaces 与 TypeScript project references 组织多包工程并通过Webpack 5 打包输出 UMD 包、同时保留源码映射Source Map的全过程。无论你是刚接触 monorepo 的新手还是想优化现有打包方案的开发者这套先编译、再打包、双模式输出的思路都值得收藏。sample-monorepo 是什么先看清它的包结构sample-monorepo 是一个典型的 npm workspaces 单仓多包工程根目录的 package.json 通过workspaces: [packages/*]把三个子包串联起来sample/componentsReact 组件库被上层应用消费sample/appReact 应用负责页面渲染与客户端入口sample/server基于 Express 的服务端提供 SSR 与静态资源托管。三个包共享根目录统一的 tsconfig.base.json开启了composite、declaration、declarationMap与sourceMap根 tsconfig.json 再通过references引用各包的src目录。这种公共配置 项目引用的结构是 monorepo 里最省心的 TS 协作方式。为什么选择 Webpack 5 输出 UMD 包UMDUniversal Module Definition是一种万能模块格式它能在浏览器全局变量、CommonJS、AMD 三种环境下同时工作。sample-monorepo 之所以用Webpack 5 输出 UMD 包是因为 sample/app 同时要被两类使用者加载浏览器端直接通过script标签加载并挂载到全局服务端由 Express 读取打包产物并注入 SSR 后的 HTML。一份产物、双端复用这正是 UMD 的核心价值。同时 Webpack 5 原生支持experiments.css与资源模块asset module处理 CSS 和静态资源不再需要额外 loader配置大幅简化。三步看懂 Webpack 5 打包 UMD 的完整链路第一步TypeScript 先编译出干净的 dist 目录打包前先执行根目录的npm run build即tsc --build。它会依据项目引用关系把每个包的src编译到各自的dist目录。由于开启了declarationMap与sourceMap见 tsconfig.base.json此时产出的 JS 已经自带 .map 文件类型声明与源码映射一步到位。第二步Webpack 5 统一入口源码映射全局开启根目录的 webpack.config.js 先做三件全局设置devtool: source-map——让最终打包产物保留完整的独立 .map 文件source-map-loader作为预处理 loader专门负责读取并透传依赖包已有的源码映射资源模块type: asset统一处理图片、字体等静态资源。也就是说上游 TypeScript 编译出的映射信息会在 Webpack 5 打包时被接力下来而不是丢失。第三步应用包配置 UMD 输出与 HtmlWebpackPlugin真正输出 UMD 包的地方在 packages/app/webpack.config.jsentry指向 TypeScript 编译后的dist/client-main.js作为客户端渲染入口output.path指向dist/umdlibraryTarget: umd让产物成为可被多环境加载的 UMD 包HtmlWebpackPlugin自动生成承载页面的 HTML。同时packages/app/package.json 提供了两套打包命令bundle:prod生产模式产物压缩 源码映射与bundle:dev开发模式非压缩、带完整映射prepack钩子保证发布前自动完成构建。源码映射是怎样一路保留下来的这可能是新手最容易困惑的点Webpack 5 打包后为什么还能在浏览器里看到原始的 .tsx 源码关键在于三级映射接力TypeScript 编译阶段sourceMap: true生成 JS 到 TS 的映射Webpack 打包阶段devtool: source-map让最终 bundle 生成独立的 .map 文件跨包引用阶段source-map-loader读取 sample/components 这类依赖包携带的映射避免组件库源码在调试器里变成一团乱码。这套设计保证了从浏览器断点到monorepo 源码的完整回溯链路排查问题再也不用来回猜。服务端如何消费 UMD 包SSR 与静态托管一次搞定sample/server 的 http-server.tsx 通过require.resolve(sample/app/package.json)定位应用包根目录再拼出dist/umd作为静态资源目录。/server路由用renderToString输出带data-ssr标记的 HTML而 client-main.tsx 会检测该标记存在则hydrateRoot做水合否则createRoot走纯客户端渲染——同一份 UMD 产物前后端各取所需。本地如何体验这套 Webpack 5 打包方案克隆仓库后按以下顺序即可跑通全链路npm i安装依赖并自动链接各 workspace 包npm run buildTypeScript 增量编译全部子包npm start以开发模式启动客户端非压缩、带源码映射方便调试npm run start:server生产模式打包后启动 SSR 服务浏览器访问http://localhost:3000/server即可看到水合后的完整页面。小结这套打包方案值得借鉴的四个设计编译与打包分层TS 负责产干净的可发布 distWebpack 5 只做最后的组装职责单一UMD 双端复用一份打包产物同时服务浏览器与 Node省去重复构建源码映射全链路保留devtool source-map-loader declarationMap 三层配合调试体验接近源码直出多包配置复用公共配置下沉根目录子包只写差异monorepo 扩展新包成本极低。如果你也在设计 npm workspaces TypeScript project references 的多包工程不妨直接照抄 sample-monorepo 这套 Webpack 5 打包模板从 UMD 输出到源码映射一路都是开箱即用的优雅体验。【免费下载链接】sample-monorepoSample monorepo setup with npm workspaces and typescript project references项目地址: https://gitcode.com/gh_mirrors/sa/sample-monorepo创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Webpack 5 打包实战：sample-monorepo 如何优雅输出 UMD 包并保留源码映射
Webpack 5 打包实战sample-monorepo 如何优雅输出 UMD 包并保留源码映射【免费下载链接】sample-monorepoSample monorepo setup with npm workspaces and typescript project references项目地址: https://gitcode.com/gh_mirrors/sa/sample-monorepo在工程化日益复杂的今天Webpack 5 打包早已不只是把 JS 揉成一团那么简单。本文以开源项目 sample-monorepo 为例带你完整走一遍它如何基于 npm workspaces 与 TypeScript project references 组织多包工程并通过Webpack 5 打包输出 UMD 包、同时保留源码映射Source Map的全过程。无论你是刚接触 monorepo 的新手还是想优化现有打包方案的开发者这套先编译、再打包、双模式输出的思路都值得收藏。sample-monorepo 是什么先看清它的包结构sample-monorepo 是一个典型的 npm workspaces 单仓多包工程根目录的 package.json 通过workspaces: [packages/*]把三个子包串联起来sample/componentsReact 组件库被上层应用消费sample/appReact 应用负责页面渲染与客户端入口sample/server基于 Express 的服务端提供 SSR 与静态资源托管。三个包共享根目录统一的 tsconfig.base.json开启了composite、declaration、declarationMap与sourceMap根 tsconfig.json 再通过references引用各包的src目录。这种公共配置 项目引用的结构是 monorepo 里最省心的 TS 协作方式。为什么选择 Webpack 5 输出 UMD 包UMDUniversal Module Definition是一种万能模块格式它能在浏览器全局变量、CommonJS、AMD 三种环境下同时工作。sample-monorepo 之所以用Webpack 5 输出 UMD 包是因为 sample/app 同时要被两类使用者加载浏览器端直接通过script标签加载并挂载到全局服务端由 Express 读取打包产物并注入 SSR 后的 HTML。一份产物、双端复用这正是 UMD 的核心价值。同时 Webpack 5 原生支持experiments.css与资源模块asset module处理 CSS 和静态资源不再需要额外 loader配置大幅简化。三步看懂 Webpack 5 打包 UMD 的完整链路第一步TypeScript 先编译出干净的 dist 目录打包前先执行根目录的npm run build即tsc --build。它会依据项目引用关系把每个包的src编译到各自的dist目录。由于开启了declarationMap与sourceMap见 tsconfig.base.json此时产出的 JS 已经自带 .map 文件类型声明与源码映射一步到位。第二步Webpack 5 统一入口源码映射全局开启根目录的 webpack.config.js 先做三件全局设置devtool: source-map——让最终打包产物保留完整的独立 .map 文件source-map-loader作为预处理 loader专门负责读取并透传依赖包已有的源码映射资源模块type: asset统一处理图片、字体等静态资源。也就是说上游 TypeScript 编译出的映射信息会在 Webpack 5 打包时被接力下来而不是丢失。第三步应用包配置 UMD 输出与 HtmlWebpackPlugin真正输出 UMD 包的地方在 packages/app/webpack.config.jsentry指向 TypeScript 编译后的dist/client-main.js作为客户端渲染入口output.path指向dist/umdlibraryTarget: umd让产物成为可被多环境加载的 UMD 包HtmlWebpackPlugin自动生成承载页面的 HTML。同时packages/app/package.json 提供了两套打包命令bundle:prod生产模式产物压缩 源码映射与bundle:dev开发模式非压缩、带完整映射prepack钩子保证发布前自动完成构建。源码映射是怎样一路保留下来的这可能是新手最容易困惑的点Webpack 5 打包后为什么还能在浏览器里看到原始的 .tsx 源码关键在于三级映射接力TypeScript 编译阶段sourceMap: true生成 JS 到 TS 的映射Webpack 打包阶段devtool: source-map让最终 bundle 生成独立的 .map 文件跨包引用阶段source-map-loader读取 sample/components 这类依赖包携带的映射避免组件库源码在调试器里变成一团乱码。这套设计保证了从浏览器断点到monorepo 源码的完整回溯链路排查问题再也不用来回猜。服务端如何消费 UMD 包SSR 与静态托管一次搞定sample/server 的 http-server.tsx 通过require.resolve(sample/app/package.json)定位应用包根目录再拼出dist/umd作为静态资源目录。/server路由用renderToString输出带data-ssr标记的 HTML而 client-main.tsx 会检测该标记存在则hydrateRoot做水合否则createRoot走纯客户端渲染——同一份 UMD 产物前后端各取所需。本地如何体验这套 Webpack 5 打包方案克隆仓库后按以下顺序即可跑通全链路npm i安装依赖并自动链接各 workspace 包npm run buildTypeScript 增量编译全部子包npm start以开发模式启动客户端非压缩、带源码映射方便调试npm run start:server生产模式打包后启动 SSR 服务浏览器访问http://localhost:3000/server即可看到水合后的完整页面。小结这套打包方案值得借鉴的四个设计编译与打包分层TS 负责产干净的可发布 distWebpack 5 只做最后的组装职责单一UMD 双端复用一份打包产物同时服务浏览器与 Node省去重复构建源码映射全链路保留devtool source-map-loader declarationMap 三层配合调试体验接近源码直出多包配置复用公共配置下沉根目录子包只写差异monorepo 扩展新包成本极低。如果你也在设计 npm workspaces TypeScript project references 的多包工程不妨直接照抄 sample-monorepo 这套 Webpack 5 打包模板从 UMD 输出到源码映射一路都是开箱即用的优雅体验。【免费下载链接】sample-monorepoSample monorepo setup with npm workspaces and typescript project references项目地址: https://gitcode.com/gh_mirrors/sa/sample-monorepo创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考