Webpack 打包图片

介绍

资源模块：Webpack5 内置资源模块（字体、图片等）打包，不需要额外的loader。

https://www.webpackjs.com/guides/asset-modules/

使用Webpack打包图片的步骤：
1）配置 webpack.config.js，让 Webpack 拥有图片打包功能。

• 占位符[hash]：表示对模块内容做算法计算，得到映射的数字字母组合的字符串。
• 占位符[ext]：表示使用当前模块原本的占位符，例如：.png/.jpg 等字符串。
• 占位符[query]：保留引入文件时代码中查询参数（只有 URL 下生效）。

2）打包

注意：判断资源临界值默认为 8KB：

• 如果大于 8KB 文件：发送一个单独的文件并导出 URL 地址
• 如果小于 8KB 文件：导出一个 data URI（base64字符串）

示例

准备源码

文件路径：

为了对比，代码中用到大小不同的两个图片：

配置webpack.config.js

打包