example.js【免费下载链接】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_{{example.js}}_dist/output.js_{{dist/output.js}}_dist/require_context_templates_sync_recursive_.output.js_{{dist/require_context_templates_sync_recursive_.output.js}}_InfoUnoptimized_{{stdout}}_Production mode_{{production:stdout}}_占位符分两类 1. **文件内容占位符**_{{example.js}}_、_{{dist/output.js}}_、_{{dist/require_context_templates_sync_recursive_.output.js}}_。占位符文本即仓库相对路径渲染时把该路径下文件的完整内容替换进来。注意第二个占位符对应的正是本文分析的核心产物 output.js第三个则精确命名了异步 chunk 文件名 require_context_templates_sync_recursive_.output.js——文件名本身就携带了上下文模块的身份信息详见后文chunk 命名一节。 2. **构建输出占位符**_{{stdout}}_ 与 _{{production:stdout}}_分别对应未优化模式--mode none和Production mode--mode production两种编译的 stats 标准输出。 渲染逻辑集中在 [examples/build-common.js](https://link.gitcode.com/i/677ba0c938326a9c32d955ae2f0ef341)其流程可归纳为 - 读取当前目录的 template.mdfs.readFileSync(... template.md) - 串行执行三轮编译async.series 1. --mode production --env production输出前缀 production回填 _{{production:...}}_ 类占位符 2. --mode development --env development --devtool none前缀 development 3. --mode none --env none --output-pathinfo verbose无前缀回填裸 _{{stdout}}_即 README 中的 Unoptimized 小节。 每轮前会清空 dist/ 目录避免上一轮产物污染本轮快照每轮均附加 --entry ./example.js --output-filename output.js --output-public-path dist/ 及 --stats-reasons --stats-used-exports --stats-provided-exports --stats-chunks --stats-modules-space 99999 --stats-chunk-origins 等参数这就是 README 中 stats 信息如此详尽的原因。 - 对 stdout 做归一化日期替换为 XXXX-XX-XX、时间替换为 XXXX:XX:XX、版本号替换为 webpack X.X.X保证文档快照可长期稳定 - 调用 tc.replaceResults / tc.replaceBasetc 即 [examples/template-common.js](https://link.gitcode.com/i/688d5b418ed39cdd46df6626b26a6abc)完成占位符替换最后写回 README.md。 从源码结构看这个模板 回填管线是 examples/ 目录下所有示例共用的文档生成机制template.md 是源README.md 是产物人工只需维护模板产物快照随每次构建自动与当前 webpack 行为保持一致。 ## 入口源码解析动态 require 与 require.ensure 的叠加 [example.js](https://link.gitcode.com/i/a07b50761900b2d979d848b8e28ab4d2) 全文只有 11 行 javascript function getTemplate(templateName, callback) { require.ensure([], function(require) { callback(require(../require.context/templates/templateName)()); }); } getTemplate(a, function(a) { console.log(a); }); getTemplate(b, function(b) { console.log(b); });这里叠加了两个 webpack 特性缺一不可动态require(../require.context/templates/templateName)require的参数是字符串拼接编译期无法确定具体模块。webpack 的解析器 RequireContextDependencyParserPlugin 会对这类调用做静态分析并给未显式给出的参数取默认值源码中可见let regExp /^\.\/.*$/; // 默认只匹配 ./xxx 形式的相对请求 let recursive true; // 默认递归扫描子目录 let mode sync; // 默认同步上下文即把templates/目录下所有以./开头的文件全部收集进一个上下文模块运行时按templateName动态取用。这就是产物 stats 里../require.context/templates/ sync ^\.\/.*$这一条目的由来目录 模式 正则。require.ensure([], callback)webpack 的异步边界语法等价于告诉打包器回调内的依赖可以放到后续按需加载的 chunk。它使上下文模块及其全部依赖模块脱离入口 chunk进入名为require_context_templates_sync_recursive_的异步 chunk——这正是本示例与同步版 examples/require.context 的核心区别。上下文模块自身支持多种modeContextModule.js 中定义了完整的取值集合/** typedef {sync | eager | weak | async-weak | lazy | lazy-once} ContextMode Context mode */各模式对模块归属的影响在 ContextModule.js 的构建逻辑中可见sync/eager模式下整个上下文模块连同依赖随所在块一起进入当前 chunklazy-once模式会为整个上下文创建一个AsyncDependenciesBlock对应整个上下文放进一个异步 chunklazy模式则每个依赖一个异步块每个模板文件独立成 chunk。本示例的上下文本身是sync模式异步拆分完全由外层的require.ensure边界决定——两个机制是正交叠加的。产物一dist/output.js —— 只剩 runtime 与入口构建后入口 chunkoutput.js对应占位符_{{dist/output.js}}_完整快照见 README.md 的# dist/output.js小节结构为/******/ (() { // webpackBootstrap /******/ var __webpack_modules__ ({}); /******/ /* webpack runtime code */ /*!********************!*\ !*** ./example.js ***! \********************/ function getTemplate(templateName, callback) { __webpack_require__.e(/*! require.ensure */ require_context_templates_sync_recursive_).then((function(require) { callback(__webpack_require__(1)(./templateName)()); }).bind(null, __webpack_require__))catch; } ...关键观察点__webpack_modules__ ({})入口 chunk 内没有任何业务模块。三个模板文件与上下文模块全部被移到了异步 chunk这正是require.ensure的拆分效果。require.ensure的编译产物是__webpack_require__.e(chunkId)即 runtime 的 JSONP chunk 加载器/* webpack/runtime/ensure chunk */段按 chunk id 加载chunkId .output.js__webpack_require__.u (chunkId) (chunkId .output.js)脚本 URL 前缀为publicPath dist/。注释/*! require.ensure */也明确标注了它来源于require.ensure调用。__webpack_require__(1)上下文模块在异步 chunk 中的模块 id 是 1与 stats 中 dependent modules ... 3 modules 及异步 chunk 内webpackContext.id 1一致。加载完成后上下文函数以(./templateName)为参数被调用运行时从映射表中取出目标模板模块。完整的 runtime 段module cache、JSONP chunk loading、webpackChunk全局数组、ChunkLoadError处理等与常规 webpack 4/5 浏览器 runtime 一致此处不再展开。产物二require_context_templates_sync_recursive_.output.js —— 上下文模块与模板实体异步 chunk 的完整内容见 README.md 的# dist/require_context_templates_sync_recursive_.output.js小节结构上分两部分1. 上下文模块模块 id 1它是整目录扫描的运行时代理/* 1 */ /*!*** ../require.context/templates/ sync ^\.\/.*$ ***!*/ /***/ ((module, __unused_webpack_exports, __webpack_require__) { const map { ./a: 2, ./a.js: 2, ./b: 3, ./b.js: 3, ./c: 4, ./c.js: 4 }; function webpackContext(req) { const id webpackContextResolve(req); return __webpack_require__(id); } function webpackContextResolve(req) { if(!__webpack_require__.o(map, req)) { const e new Error(Cannot find module req ); e.code MODULE_NOT_FOUND; throw e; } return map[req]; } webpackContext.keys function webpackContextKeys() { return Object.keys(map); }; webpackContext.resolve webpackContextResolve; module.exports webpackContext; webpackContext.id 1;细节值得注意map同时收录了带扩展名与不带扩展名两种键./a与./a.js都指向 2因此getTemplate(a)与getTemplate(a.js)都能命中——这是上下文模块请求归一化的结果。未命中的请求会抛出携带code MODULE_NOT_FOUND的Error模拟 CommonJS 的报错语义而不是返回undefined。webpackContext.keys()/webpackContext.resolve暴露了目录键表与解析函数可供业务侧遍历或校验可用模板。2. 三个模板实体模块id 2/3/4内容即 templates/a.js 等原文/* 2 */ /*!*** ../require.context/templates/a.js ***!*/ /***/ ((module) { module.exports function() { return This text was generated by template A; } /***/ }),chunk 整体以self[webpackChunk].push([[require_context_templates_sync_recursive_], [...modules...]])形式自注册到 runtime 预留的全局数组与入口 runtime 的webpackJsonpCallback机制配对完成 JSONP 加载。chunk 名require_context_templates_sync_recursive_从何而来该名称由上下文模块的请求信息派生目录require.context/templates 模式sync 递归标记recursive经过文件名安全化/、正则字符转下划线故尾部与中间出现多个_。webpack.config.js 中特意设置optimization.chunkIds: named注释也写明了目的——To keep filename consistent between different modes即让 production 与 development 两轮构建产生同名文件template.md中的占位符路径才能稳定引用同一产物。在 ContextModule 的源码中options.chunkName同样参与模块 identifier 的构成是上下文自定义 chunk 名的入口。对照实验同一动态 require 不加 require.ensure 会怎样仓库里的 examples/require.context 是它的同步对照版入口写法为function getTemplate(templateName) { return require(./templates/templateName); }区别一目了然同步版产物只有一个output.jsUnoptimized 下 3.75 KiB上下文模块与 4 个模板模块全部打进入口 chunkruntime 段也只有hasOwnProperty shorthand一条无 JSONP 加载器拆分版产物是两个chunk入口 8.64 KiB其中 4.83 KiB 为 runtime因为多了 ensure chunk、load script、jsonp chunk loading 等 runtime 模块 异步 chunk 2.28 KiB。也就是说require.ensure的代价是入口多出约 4.8 KiB 的 chunk 加载 runtime收益是把 457 字节的上下文模块加 240 字节的模板实体从首屏中剥离。当模板目录膨胀真实场景如多语言文案、主题资源、插件集时这种拆分直接决定首包体积与按需加载粒度而若想让每个模板独立成 chunk 以便更细粒度缓存应改用require.context(dir, true, regex, lazy)的lazy模式对应 ContextModule.js 中为每个依赖创建独立异步块的分支本例则用require.ensure实现整组模板共享一个异步 chunk的中间形态。stats 输出解读README 中 Unoptimized 与 Production mode 两节template.md 回填的两段 stats_{{stdout}}_与_{{production:stdout}}_是验证拆分结果最直接的证据关键行如下完整快照见 README.md# Info小节asset output.js 8.64 KiB [emitted] (name: main) asset require_context_templates_sync_recursive_.output.js 2.28 KiB [emitted] chunk (runtime: main) output.js (main) 266 bytes (javascript) 4.83 KiB (runtime) [entry] [rendered] ./example.js main runtime modules 4.83 KiB 6 modules ./example.js 266 bytes [built] [code generated] chunk (runtime: main) require_context_templates_sync_recursive_.output.js 457 bytes [rendered] ./example.js 2:1-4:3 dependent modules 240 bytes [dependent] 3 modules ../require.context/templates/ sync ^\.\/.*$ 217 bytes [built] [code generated] cjs require context ./example.js 3:11-64【免费下载链接】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），仅供参考