webpack 5 如何构建多部分 UMD 库并为每个部分生成独立命名空间【免费下载链接】webpackA bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows for loading parts of the application on demand. Through loaders, modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff.项目地址: https://gitcode.com/GitHub_Trending/web/webpack你需要把一个大库拆成若干可以单独使用、也可以一起使用的部分并用 webpack 5 为每一部分输出一个独立的 UMD 文件。完成后的结果是通过script标签引入时所有部分挂在全局命名空间MyLibrary下、各自占用一个独立属性如MyLibrary.alpha、MyLibrary.beta通过 CommonJS 或 AMD 引入时每个部分直接导出自身。本文按 webpack 仓库自带的 multi-part-library 示例 操作示例目录 examples/multi-part-library/ 位于examples下当前仓库的 webpack 版本为 5.110.3见 package.json。示例结构每个库部分就是一个入口示例只有两个源文件内容各为一行alpha.jsmodule.exports alpha;beta.jsmodule.exports beta;示例 READMEexamples/multi-part-library/README.md对目标效果的描述是脚本标签方式导出到命名空间MyLibrary每个部分成为该命名空间下的一个属性CommonJS/AMD 方式则直接导出每个部分。构建后 webpack 会自动把模块包裹成可在所有环境消费的形式不需要手写 UMD 样板代码。配置多入口与每个部分的独立命名空间完整配置见 webpack.config.jsuse strict; const path require(path); /** type {import(webpack).Configuration} */ const config { // mode: development || production, entry: { alpha: ./alpha, beta: ./beta }, output: { path: path.join(__dirname, dist), filename: MyLibrary.[name].js, library: [MyLibrary, [name]], libraryTarget: umd } }; module.exports config;四个关键配置项的作用依据示例 README 与 types.d.ts 中的类型注释entry用多个入口点把库的每个部分构建成一个独立的输出文件。output.filename包含[name]让每个输出文件得到不同文件名即MyLibrary.alpha.js与MyLibrary.beta.js。output.library定义命名空间。写成数组[MyLibrary, [name]]时用[name]给每个入口一个不同的二级命名空间——这是每个部分独立命名空间的实现点。output.libraryTarget: umd生成 UMDUniversal Module Definition模块使其可在 CommonJS、AMD 和 script 标签三种环境消费。types.d.ts中说明libraryTarget的内置类型还包括var、module、commonjs2、amd、umd2、system等本场景只用umd。library的注释为Make the output files a library, exporting the exports of the entry point若只想暴露入口导出的某个属性还有libraryExport选项本示例未使用。README 中有一条边界说明library与libraryTarget也可以在不使用多入口时使用那时就不需要[name]。本文场景是多部分库因此保留[name]。构建步骤示例的官方构建流程写在 examples/README.md 的 Building an Example 一节按顺序执行均在仓库根目录除第 4 步外# 1. 在仓库根目录安装依赖 yarn # 2. 初始化示例环境setup/setup.js 会执行 yarn install、yarn link、yarn link webpack # 在本仓库 node_modules 内建立 webpack 软链接不涉及系统级改动 yarn setup # 3. 安装 webpack-cli 开发依赖 yarn add --dev webpack-cli第 4 步的通用做法是在具体示例目录运行node build.js但examples/multi-part-library/目录内只有README.md、alpha.js、beta.js、template.md、webpack.config.js没有build.js。因此在本示例目录直接调用 webpack-cliwebpack 包的bin字段声明了webpack命令入口即第 3 步安装的 CLI 对应的可执行命令cd examples/multi-part-library npx webpack --config webpack.config.js该命令只把构建产物写入本目录的dist/不修改仓库中的其他文件。配置中的output.path使用path.join(__dirname, dist)即固定输出到示例目录下的dist/。生产构建把mode设为production配置中留有// mode: development || production,注释即可示例 README 的 Info 一节给出了对应输出。验证结果产物、命名空间包裹代码与 stats1. 检查输出文件。构建后examples/multi-part-library/dist/下应有MyLibrary.alpha.js和MyLibrary.beta.js两个文件文件名由MyLibrary.[name].js模板生成。2. 检查 UMD 包裹与命名空间。以dist/MyLibrary.alpha.js为例产物头部是 webpack 自动生成的webpackUniversalModuleDefinition包裹以下内容摘自示例 README 中展示的产物文件(function webpackUniversalModuleDefinition(root, factory) { if(typeof exports object typeof module object) module.exports factory(); else if(typeof define function define.amd) define([], factory); else if(typeof exports object) exports[MyLibrary] factory(); else root[MyLibrary] root[MyLibrary] || {}, root[MyLibrary][alpha] factory(); })(self, () { // ... 模块代码其中包含 module.exports alpha; });从最后一个分支可以核对命名空间行为浏览器环境下root[MyLibrary]不存在时先创建为空对象再把该部分挂到root[MyLibrary][alpha]上beta部分对应生成root[MyLibrary][beta] factory()。root[MyLibrary] || {}这一写法保证两个文件按任意顺序加载都会挂到同一个全局对象上这就是每个部分独立命名空间、且可一起使用的落点。产物其余部分是 webpack runtime 代码模块缓存与__webpack_require__示例 README 中将其放在折叠块里。3. 核对 stats 输出。示例 README 展示了两种模式下的构建输出均为文档示例数值来自该仓库版本的一次构建未优化模式asset MyLibrary.beta.js 2.07 KiB [emitted] (name: beta) asset MyLibrary.alpha.js 2.06 KiB [emitted] (name: alpha) chunk (runtime: alpha) MyLibrary.alpha.js (alpha) 25 bytes [entry] [rendered] ./alpha alpha ./alpha.js 25 bytes [built] [code generated] used as library export chunk (runtime: beta) MyLibrary.beta.js (beta) 24 bytes [entry] [rendered] ./beta beta ./beta.js 24 bytes [built] [code generated] used as library export webpack X.X.X compiled successfully生产模式mode: production资产带[minimized]标记asset MyLibrary.alpha.js 434 bytes [emitted] [minimized] (name: alpha) asset MyLibrary.beta.js 432 bytes [emitted] [minimized] (name: beta) webpack X.X.X compiled successfully判断要点两个入口各生成一个[emitted]资产、分别标记(name: alpha)与(name: beta)每个 chunk 带独立 runtime且模块被标记为used as library export最后以webpack X.X.X compiled successfully结束。边界与可选分支不带多入口时library与libraryTarget可单独使用此时不需要[name]README 明确说明。不希望打包依赖时README 建议用externals选项把库的依赖排除在编译产物之外可参考仓库中的 externals 示例examples/externals/。只暴露部分导出时若入口导出了一个对象而你只想暴露其中某一项types.d.ts中的output.libraryExportSpecify which export should be exposed as library可用于指定本示例未涉及。完整的可复制材料就是 webpack.config.js 与两个单行源文件把entry换成你自己的各部分入口、把library数组中的MyLibrary换成你的库名其余模板[name]、UMD 包裹、命名空间挂载都不需要改动。【免费下载链接】webpackA bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows for loading parts of the application on demand. Through loaders, modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff.项目地址: https://gitcode.com/GitHub_Trending/web/webpack创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 webpack 5 如何构建多部分 UMD 库并为每个部分生成独立命名空间
webpack 5 如何构建多部分 UMD 库并为每个部分生成独立命名空间【免费下载链接】webpackA bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows for loading parts of the application on demand. Through loaders, modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff.项目地址: https://gitcode.com/GitHub_Trending/web/webpack你需要把一个大库拆成若干可以单独使用、也可以一起使用的部分并用 webpack 5 为每一部分输出一个独立的 UMD 文件。完成后的结果是通过script标签引入时所有部分挂在全局命名空间MyLibrary下、各自占用一个独立属性如MyLibrary.alpha、MyLibrary.beta通过 CommonJS 或 AMD 引入时每个部分直接导出自身。本文按 webpack 仓库自带的 multi-part-library 示例 操作示例目录 examples/multi-part-library/ 位于examples下当前仓库的 webpack 版本为 5.110.3见 package.json。示例结构每个库部分就是一个入口示例只有两个源文件内容各为一行alpha.jsmodule.exports alpha;beta.jsmodule.exports beta;示例 READMEexamples/multi-part-library/README.md对目标效果的描述是脚本标签方式导出到命名空间MyLibrary每个部分成为该命名空间下的一个属性CommonJS/AMD 方式则直接导出每个部分。构建后 webpack 会自动把模块包裹成可在所有环境消费的形式不需要手写 UMD 样板代码。配置多入口与每个部分的独立命名空间完整配置见 webpack.config.jsuse strict; const path require(path); /** type {import(webpack).Configuration} */ const config { // mode: development || production, entry: { alpha: ./alpha, beta: ./beta }, output: { path: path.join(__dirname, dist), filename: MyLibrary.[name].js, library: [MyLibrary, [name]], libraryTarget: umd } }; module.exports config;四个关键配置项的作用依据示例 README 与 types.d.ts 中的类型注释entry用多个入口点把库的每个部分构建成一个独立的输出文件。output.filename包含[name]让每个输出文件得到不同文件名即MyLibrary.alpha.js与MyLibrary.beta.js。output.library定义命名空间。写成数组[MyLibrary, [name]]时用[name]给每个入口一个不同的二级命名空间——这是每个部分独立命名空间的实现点。output.libraryTarget: umd生成 UMDUniversal Module Definition模块使其可在 CommonJS、AMD 和 script 标签三种环境消费。types.d.ts中说明libraryTarget的内置类型还包括var、module、commonjs2、amd、umd2、system等本场景只用umd。library的注释为Make the output files a library, exporting the exports of the entry point若只想暴露入口导出的某个属性还有libraryExport选项本示例未使用。README 中有一条边界说明library与libraryTarget也可以在不使用多入口时使用那时就不需要[name]。本文场景是多部分库因此保留[name]。构建步骤示例的官方构建流程写在 examples/README.md 的 Building an Example 一节按顺序执行均在仓库根目录除第 4 步外# 1. 在仓库根目录安装依赖 yarn # 2. 初始化示例环境setup/setup.js 会执行 yarn install、yarn link、yarn link webpack # 在本仓库 node_modules 内建立 webpack 软链接不涉及系统级改动 yarn setup # 3. 安装 webpack-cli 开发依赖 yarn add --dev webpack-cli第 4 步的通用做法是在具体示例目录运行node build.js但examples/multi-part-library/目录内只有README.md、alpha.js、beta.js、template.md、webpack.config.js没有build.js。因此在本示例目录直接调用 webpack-cliwebpack 包的bin字段声明了webpack命令入口即第 3 步安装的 CLI 对应的可执行命令cd examples/multi-part-library npx webpack --config webpack.config.js该命令只把构建产物写入本目录的dist/不修改仓库中的其他文件。配置中的output.path使用path.join(__dirname, dist)即固定输出到示例目录下的dist/。生产构建把mode设为production配置中留有// mode: development || production,注释即可示例 README 的 Info 一节给出了对应输出。验证结果产物、命名空间包裹代码与 stats1. 检查输出文件。构建后examples/multi-part-library/dist/下应有MyLibrary.alpha.js和MyLibrary.beta.js两个文件文件名由MyLibrary.[name].js模板生成。2. 检查 UMD 包裹与命名空间。以dist/MyLibrary.alpha.js为例产物头部是 webpack 自动生成的webpackUniversalModuleDefinition包裹以下内容摘自示例 README 中展示的产物文件(function webpackUniversalModuleDefinition(root, factory) { if(typeof exports object typeof module object) module.exports factory(); else if(typeof define function define.amd) define([], factory); else if(typeof exports object) exports[MyLibrary] factory(); else root[MyLibrary] root[MyLibrary] || {}, root[MyLibrary][alpha] factory(); })(self, () { // ... 模块代码其中包含 module.exports alpha; });从最后一个分支可以核对命名空间行为浏览器环境下root[MyLibrary]不存在时先创建为空对象再把该部分挂到root[MyLibrary][alpha]上beta部分对应生成root[MyLibrary][beta] factory()。root[MyLibrary] || {}这一写法保证两个文件按任意顺序加载都会挂到同一个全局对象上这就是每个部分独立命名空间、且可一起使用的落点。产物其余部分是 webpack runtime 代码模块缓存与__webpack_require__示例 README 中将其放在折叠块里。3. 核对 stats 输出。示例 README 展示了两种模式下的构建输出均为文档示例数值来自该仓库版本的一次构建未优化模式asset MyLibrary.beta.js 2.07 KiB [emitted] (name: beta) asset MyLibrary.alpha.js 2.06 KiB [emitted] (name: alpha) chunk (runtime: alpha) MyLibrary.alpha.js (alpha) 25 bytes [entry] [rendered] ./alpha alpha ./alpha.js 25 bytes [built] [code generated] used as library export chunk (runtime: beta) MyLibrary.beta.js (beta) 24 bytes [entry] [rendered] ./beta beta ./beta.js 24 bytes [built] [code generated] used as library export webpack X.X.X compiled successfully生产模式mode: production资产带[minimized]标记asset MyLibrary.alpha.js 434 bytes [emitted] [minimized] (name: alpha) asset MyLibrary.beta.js 432 bytes [emitted] [minimized] (name: beta) webpack X.X.X compiled successfully判断要点两个入口各生成一个[emitted]资产、分别标记(name: alpha)与(name: beta)每个 chunk 带独立 runtime且模块被标记为used as library export最后以webpack X.X.X compiled successfully结束。边界与可选分支不带多入口时library与libraryTarget可单独使用此时不需要[name]README 明确说明。不希望打包依赖时README 建议用externals选项把库的依赖排除在编译产物之外可参考仓库中的 externals 示例examples/externals/。只暴露部分导出时若入口导出了一个对象而你只想暴露其中某一项types.d.ts中的output.libraryExportSpecify which export should be exposed as library可用于指定本示例未涉及。完整的可复制材料就是 webpack.config.js 与两个单行源文件把entry换成你自己的各部分入口、把library数组中的MyLibrary换成你的库名其余模板[name]、UMD 包裹、命名空间挂载都不需要改动。【免费下载链接】webpackA bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows for loading parts of the application on demand. Through loaders, modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff.项目地址: https://gitcode.com/GitHub_Trending/web/webpack创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考