webpack asset 模块实战：用 generator.dataUrl 函数自定义 SVG 内联为 data URI

webpack asset 模块实战用 generator.dataUrl 函数自定义 SVG 内联为 data URI【免费下载链接】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本文围绕 examples/asset-svg-data-uri 官方示例讲解 webpack asset 模块类型type: asset中generator.dataUrl的自定义用法通过传入函数把 SVG 源文件经mini-svg-data-uri压缩后内联为 URI 字符串替代 file-loader/url-loader 时代的图片处理方式。读完后你将掌握 asset 模块的完整配置形态、dataUrl函数被 webpack 调用的源码时机以及内联与落盘emit两种产物路径的决策逻辑。示例定位asset 模块 生成器选项自定义该示例的原始文档说明见 examples/asset-svg-data-uri/template.md只有一句话的核心定义This example shows the usage of the asset module type with asset generator options customization. Files can be imported similar to other modules without file-loader or url-loader.即文件像普通模块一样被import无需 file-loader 或 url-loader且重点在于对 asset generator 选项做自定义。示例目录结构如下文件作用example.js入口模块导入 SVG 并动态渲染imgwebpack.config.js演示自定义generator.dataUrl函数images/file.svg被导入的 SVG 资源index.html本地预览页面template.mdREADME 模板含{{example.js}}、{{webpack.config.js}}、{{dist/output.js}}等占位符由 examples/buildAll.js、examples/examples.js 等示例生成脚本填充渲染出 README.md完整配置解析下面是示例的完整 webpack 配置原样摘自 webpack.config.js逐段说明use strict; const svgToMiniDataURI require(mini-svg-data-uri); /** type {import(webpack).Configuration} */ const config { output: { // 资源文件落盘时的文件名模板本例中仅 png/jpg 会走这条分支 assetModuleFilename: images/[hash][ext] }, module: { rules: [ { // 普通位图走 asset 默认行为按大小自动决定内联或落盘 test: /\.(png|jpg)$/, type: asset }, { // SVG强制自定义 dataUrl 生成函数 test: /\.svg$/, type: asset, generator: { /** * param {string | Buffer} content the content * returns {string} data URI */ dataUrl: (content) { if (typeof content ! string) { content content.toString(); } return svgToMiniDataURI(content); } } } ] } }; module.exports config;关键配置点generator.dataUrl为函数这是本示例的核心。dataUrl既可传对象{ encoding, mimetype }也可传函数传函数时 webpack 放弃内置的data:mime;base64,...拼装逻辑把编码方式完全交给你的函数决定。示例中用 package.json 的 devDependencies 里的mini-svg-data-urimini-svg-data-uri: ^1.2.3对 SVG 做去空白、属性重排、短属性名等压缩产出比 base64 更短、可读的data:image/svgxml,...URI。Buffer 兼容处理webpack 传给函数的第一个参数是模块原始内容的source()可能是string也可能是Buffer。配置中先做content.toString()转换保证svgToMiniDataURI拿到文本。output.assetModuleFilename这是资源“落盘”分支的文件名模板images/[hash][ext]。注意本例的 SVG 被强制内联并不产出独立文件该配置只对png/jpg这类未内联的 asset 生效。输入模块像导入普通模块一样导入图片example.js 的全部逻辑import svg from ./images/file.svg; const container document.createElement(div); Object.assign(container.style, { display: flex, justifyContent: center }); document.body.appendChild(container); function createImageElement(title, src) { const div document.createElement(div); div.style.textAlign center; const h2 document.createElement(h2); h2.textContent title; div.appendChild(h2); const img document.createElement(img); img.setAttribute(src, src); img.setAttribute(width, 150); div.appendChild(img); container.appendChild(div); } [svg].forEach(src { createImageElement(src.split(.).pop(), src); });svg的运行时值就是一段字符串data URI直接赋给img src即可不需要任何 loader 链。构建产物SVG 被内联为 data URI由 README.md 记录的构建输出可见打包后的output.js中该资源模块被压缩为一个字符串导出/*!*************************!*\ !*** ./images/file.svg ***! \*************************/ /***/ ((module) { module.exports data:image/svgxml,%3csvg xmlnshttp://www.w3.or...3c/svg%3e; /***/ })对应的 webpack stats 输出asset output.js 3.79 KiB [emitted] (name: main) chunk (runtime: main) output.js (main) 1.54 KiB (javascript) 211 bytes (runtime) [entry] [rendered] ./example.js main dependent modules 915 bytes [dependent] 1 module runtime modules 211 bytes 1 module ./example.js 658 bytes [built] [code generated] [no exports] [used exports unknown] entry ./example.js main webpack X.X.X compiled successfully注意产物中没有额外的.svg文件条目——因为自定义dataUrl路径下 SVG 完全内联assetModuleFilename那条images/[hash][ext]模板没有机会生效。源码原理dataUrl 函数在哪里被调用从源码结构看整条链路涉及 lib/asset/AssetModulesPlugin.js、lib/asset/AssetParser.js、lib/asset/AssetGenerator.js 三个文件。1. 插件注册解析器先决定“是否内联”AssetModulesPlugin在createParser钩子上为asset类型创建AssetParser并注入默认的dataUrlCondition见 AssetModulesPlugin.jslet dataUrlCondition parserOptions.dataUrlCondition; if (!dataUrlCondition || typeof dataUrlCondition object) { dataUrlCondition { maxSize: 8096, ...dataUrlCondition }; }即type: asset默认以8096 字节为界小于该值的文件走 data URL 内联大于则落盘。asset/inline等价于强制内联new AssetParser(true)asset/resource等价于强制落盘new AssetParser(false)。AssetParser.parse见 AssetParser.js据此设置buildInfo.dataUrlbuildInfo.dataUrl Buffer.byteLength(source) this.dataUrlCondition.maxSize;本例的 SVG 很小默认也会内联自定义dataUrl函数改变的是“内联成什么”而“要不要内联”仍由parser.dataUrlCondition或改用asset/inline控制。2. 生成器函数分支与默认分支createGenerator钩子中asset、asset/inline、asset/resource三种类型都会创建同一个AssetGeneratorgenerator.dataUrl原样透传见 AssetModulesPlugin.js。对象形态的dataUrl会被补全默认值dataUrl generatorOptions.dataUrl; if (!dataUrl || typeof dataUrl object) { dataUrl { encoding: undefined, mimetype: undefined, ...dataUrl }; }真正调用自定义函数的位置在AssetGenerator.generateDataUri见 AssetGenerator.jsif (typeof this.dataUrlOptions function) { encodedSource this.dataUrlOptions.call(null, source.source(), { filename: module.getResource(), module }); } else { // 默认路径encodeDataUri data:${mimetype}${encoding ? ;${encoding} : },${encodedContent} }两点值得注意传入函数的第一个参数是source.source()string | Buffer第二个参数提供filename资源文件路径和module因此函数完全可以根据文件名或模块状态做差异化编码函数分支跳过了 mimetype 查询。默认路径下getMimeType会从generator.dataUrl.mimetype或按扩展名查 mime 数据库查不到会抛错提示 “pass a mimetype viagenerator.mimetype”函数分支则要求你自己返回一个合法的完整 URI——示例中mini-svg-data-uri的返回值已经自带data:image/svgxml,前缀正是这个原因。默认分支的编码细节在encodeDataUri见 AssetGenerator.jsencoding: base64走 Buffer base64encoding: false走encodeURIComponent并额外转义!()*。3. 生成代码data URL 被 JSON 序列化后导出AssetGenerator.generate中当module.buildInfo.dataUrl为真且需要 JavaScript 源时见 AssetGenerator.jsconst encodedSource this.generateDataUri(...); content type JAVASCRIPT_TYPE ? JSON.stringify(encodedSource) : encodedSource;即最终产物就是产物中看到的module.exports data:image/svgxml,...;形式。若未走 data URL则进入 else 分支计算contenthash、用assetModuleFilename模板可被generator.filename/generator.outputPath覆盖拼出落盘路径再经publicPath前缀生成运行时字符串。4. 缓存与纯函数约束AssetGenerator.updateHash中对函数形态dataUrlOptions的处理带有一段重要注释见 AssetGenerator.js// this.dataUrlOptions as function should be pure and only depend on input source and filename // therefore it doesnt need to be hashedwebpack 假设你的dataUrl函数是纯函数——输出只由输入内容与文件名决定函数本身不参与内容哈希。若函数依赖外部可变状态如环境变量、时间戳持久缓存可能复用旧的编码结果此时可通过给函数挂ident属性代码会读取this.dataUrlOptions.ident参与哈希显式声明变化维度。默认行为 vs 自定义函数选型对照目标配置方式产物形态小文件内联、大文件落盘默认 8 KiB 阈值type: asset内联为data:mime;base64,...或落盘文件强制内联 / 强制落盘type: asset/inline/type: asset/resource单一形态调整内联阈值parser: { dataUrlCondition: { maxSize: N } }或函数决定buildInfo.dataUrl改变内联编码generator: { dataUrl: { encoding: base64 \| false, mimetype } }对象分支webpack 自动拼 URI完全自定义内联编码本例generator: { dataUrl: (content, { filename, module }) string }函数分支返回值即最终 URI补充两个实现细节便于排查体积与缓存问题AssetGenerator.getSize对内联资源估算体积时使用originalSource.size() * 1.34 36见 AssetGenerator.js这正是 base64 约 4/3 膨胀系数加 data URL 头尾的近似而getTypes会依据模块的引用方决定是否暴露asset/javascript/asset-url源类型落盘分支的资产文件经compilation.hooks.renderManifest输出见 AssetModulesPlugin.js。适用前提与限制generator.dataUrl函数分支返回的必须是完整 URI 字符串含data:前缀webpack 不再补充 mimetype 与编码“是否内联”由 parser 阶段的dataUrlCondition决定函数只决定“内联成什么”。想让 SVG 永不落盘可改用type: asset/inline或在parser.dataUrlCondition上放宽阈值函数需保持纯函数语义见上文updateHash注释否则持久缓存filesystem cache下可能出现陈旧产物本例依赖mini-svg-data-uri这一 devDependency属于示例侧的第三方库webpack 本体不内置该压缩逻辑配置校验基于 JSON SchemaAssetGeneratorOptions见 schemas/WebpackOptions.jsongenerator下的非法字段会在编译前被compiler.validate拦截报错路径前缀为generator。如何复现在仓库根目录执行构建示例所用的统一示例脚本 examples/buildAll.js由 examples/examples.js 提供运行框架选择asset-svg-data-uri即可得到dist/output.js与 stats 输出template.md中的{{dist/output.js}}、{{stdout}}占位符会被真实产物填充渲染为最终的 README。若只想手动验证用任意 webpack 工程按上文 webpack.config.js 配置编译即可重点观察产物中module.exports data:image/svgxml,...一行是否与源文件内容一致且经过压缩。【免费下载链接】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），仅供参考