01月
06

发表于 • 字数统计 6596 • 被 5 人看爆

##2025/1/6 01:18:32:

webpack image 是如何打包的 #webpack #react #image

react webpack jsx 的组合体，显示3 张图片
https://github.com/qyzhizi/js-logical/tree/main/2024-09-13-react-webpack-jsx-combine

https://qyzhizi.cn/img/202501060114256.png
小于 8K 嵌入
大于 8K 返回url
type: "asset"**：这是 Webpack 5 的一个配置项，表示使用新的 Asset Modules 来处理静态资源（如图片、字体等）。Webpack 会自动根据文件大小来决定是内嵌文件（小文件）还是将文件复制到输出目录（大文件）。

webpack.config.js 中配置 图片如何打包，配置中讲图片打包到 images 文件夹，在最终生成的 man.js 中，小于 8K 嵌入
大于 8K 使用 url 比如：/images/89a353e9c515885abd8e.png

https://chatgpt.com/share/677abefb-48f4-800f-b256-3825b002c9fa

当你看到类似于 '/images/89a353e9c515885abd8e.png' 这样的输出时，它表示 Webpack 对静态资源（比如图片文件）的处理结果。具体来说：

@@@ 解释

  • '_public_file_png__WEBPACK_IMPORTED_MODULE_2__' 是之前通过 Webpack 的模块系统导入的变量名，代表了 file.png 文件。
  • '/images/89a353e9c515885abd8e.png' 是 Webpack 在打包过程中生成的该图片的 最终路径。

@@@ 这个路径的含义：

  • /images/89a353e9c515885abd8e.png 可能是 Webpack 使用加载器（例如 file-loader 或 url-loader）处理过该图片之后生成的一个新的路径。这个路径可能会被配置成相对于服务器根目录或其他特定路径。
    • 如果 Webpack 配置了文件输出目录为 /images/，那么该图片会被复制到该目录，并且文件名 89a353e9c515885abd8e.png 可能是 Webpack 根据哈希值生成的，以便进行缓存管理。

例如，WebPack 会对文件名进行哈希化处理，生成一个唯一的文件名，确保每次文件内容改变时，文件名也会更新，从而避免缓存问题。

@@@ 综上：

  1. '/images/89a353e9c515885abd8e.png' 是图片文件的最终位置，WebPack 会将其作为打包资源输出。
  2. 在运行时，当你引用 _public_file_png__WEBPACK_IMPORTED_MODULE_2__ 这个变量时，实际得到的就是这个路径。
  3. 这个路径可以用于在 HTML 或 JavaScript 中作为图片的 src，例如：
const img = new Image();
img.src = _public_file_png__WEBPACK_IMPORTED_MODULE_2__;  // 这里就是 '/images/89a353e9c515885abd8e.png'
document.body.appendChild(img);

这段代码会在页面上显示图片，路径会指向打包后的文件。

webpack build

root@LXC-ubuntu-node [17:23:47] [~/git_rep/js-logical/2024-09-13-react-webpack-jsx-combine/build] [main *]
-> # ls
favicon.ico                   main.a9a2296f5eb38f8f43b5.js.LICENSE.txt
images                        vendors-node_modules_pnpm_react-dom_18_3_1_react_18_3_1_node_modules_react-dom_client_js.6102a3c032e2a8b2a737.js
index.html                    vendors-node_modules_pnpm_react-dom_18_3_1_react_18_3_1_node_modules_react-dom_client_js.6102a3c032e2a8b2a737.js.LICENSE.txt
main.a9a2296f5eb38f8f43b5.js

npx http-server ./build --cors

root@LXC-ubuntu-node [17:02:03] [~/git_rep/js-logical/2024-09-13-react-webpack-jsx-combine] [main *]
-> # npx http-server ./build  --cors
Starting up http-server, serving ./build

http-server version: 14.1.1

http-server settings: 
CORS: true
Cache: 3600 seconds
Connection Timeout: 120 seconds
Directory Listings: visible
AutoIndex: visible
Serve GZIP Files: false
Serve Brotli Files: false
Default File Extension: none

Available on:
  http://127.0.0.1:8080
  http://192.168.31.202:8080
Hit CTRL-C to stop the server

[2025-01-05T17:02:36.828Z]  "GET /" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36"
(node:5820) [DEP0066] DeprecationWarning: OutgoingMessage.prototype._headers is deprecated
(Use `node --trace-deprecation ...` to show where the warning was created)
[2025-01-05T17:02:36.926Z]  "GET /vendors-node_modules_pnpm_react-dom_18_3_1_react_18_3_1_node_modules_react-dom_client_js.6102a3c032e2a8b2a737.js" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36"
[2025-01-05T17:02:37.338Z]  "GET /main.a9a2296f5eb38f8f43b5.js" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36"
[2025-01-05T17:02:37.816Z]  "GET /images/89a353e9c515885abd8e.png" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36"
[2025-01-05T17:02:37.824Z]  "GET /favicon.ico" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36"
[2025-01-05T17:04:28.344Z]  "GET /" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36"
[2025-01-05T17:04:28.432Z]  "GET /vendors-node_modules_pnpm_react-dom_18_3_1_react_18_3_1_node_modules_react-dom_client_js.6102a3c032e2a8b2a737.js" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36"
[2025-01-05T17:04:28.433Z]  "GET /main.a9a2296f5eb38f8f43b5.js" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36"
[2025-01-05T17:04:29.556Z]  "GET /images/89a353e9c515885abd8e.png" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36"
[2025-01-05T17:04:29.764Z]  "GET /favicon.ico" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36"
[2025-01-05T17:04:52.706Z]  "GET /" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36"
[2025-01-05T17:04:52.794Z]  "GET /vendors-node_modules_pnpm_react-dom_18_3_1_react_18_3_1_node_modules_react-dom_client_js.6102a3c032e2a8b2a737.js" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36"
[2025-01-05T17:04:52.794Z]  "GET /main.a9a2296f5eb38f8f43b5.js" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36"

#sque
assetModuleFilename: "images/[hash][ext]"
{
test: /.(png|jpg|svg|ico)$/,
type: "asset"
},
这是什么意思？
#ans
这是当前项目的图片配置
这段代码是 Webpack 5 中用于配置 Asset Modules 的一种方式。Webpack 5 引入了 Asset Modules 作为一种新的方式来处理静态资源（如图片、字体等），这可以代替旧的 file-loader 或 url-loader。让我们详细解析这段代码：

@@@ 代码解析

assetModuleFilename: "images/[hash][ext]"

{
  test: /\.(png|jpg|svg|ico)$/,
  type: "asset"
}

@@@@ 1. assetModuleFilename: "images/[hash][ext]"

  • 这行配置是告诉 Webpack 如何命名处理后的静态资源文件。
    • images/：指定所有资源（如图片）将被放置到 images 文件夹中。
    • [hash]：这部分会生成一个基于文件内容的哈希值。每次文件内容发生变化时，Webpack 会重新生成一个新的哈希值，从而避免缓存问题。
    • [ext]：会自动保留文件的原始扩展名（比如 .png、.jpg 等）。

例如，如果一个 .jpg 文件的内容是 abcdef123456，Webpack 会将其输出为 images/abcdef123456.jpg。哈希值保证了文件唯一，并且当文件内容变化时，文件名会发生变化，从而避免缓存问题。

@@@@ 2. test: /\.(png|jpg|svg|ico)$/,

  • test 是一个正则表达式，匹配文件扩展名。这里匹配的是 .png、.jpg、.svg 和 .ico 等图片格式。
    • 这告诉 Webpack 应该对这些类型的文件应用特定的处理规则。

@@@@ 3. type: "asset"

  • type: "asset" 是 Webpack 5 引入的新的处理方式，用于替代 file-loader 和 url-loader。
    • type: "asset" 表示 Webpack 会根据文件的大小自动决定如何处理：
      • 较小的文件 会被转换成一个 Data URL（Base64 编码），从而内嵌到最终的 JavaScript 中，这样可以减少 HTTP 请求。
      • 较大的文件 会被当作普通的文件处理（与 file-loader 类似），并将文件复制到输出目录。

@@@ 总结

  • type: "asset"：这是 Webpack 5 的一个配置项，表示使用新的 Asset Modules 来处理静态资源（如图片、字体等）。Webpack 会自动根据文件大小来决定是内嵌文件（小文件）还是将文件复制到输出目录（大文件）。

  • assetModuleFilename：这是用于配置输出文件的路径和命名规则。文件会放置到 images/ 文件夹，并使用哈希值作为文件名的一部分，以避免缓存问题。

@@@ 举个例子

假设你在项目中使用了一张图片 logo.png，当你配置了这段代码后：

  • 如果图片小于某个阈值（例如 8KB），Webpack 会将其转换为 Base64 编码的字符串，直接嵌入到 JavaScript 文件中。
  • 如果图片大于阈值，Webpack 会将其复制到输出目录的 images/ 文件夹，并且文件名会包含哈希值，例如：images/abcdef123456.png。

这种配置方法是 Webpack 5 的一种简洁且强大的资源处理方式，不再需要单独安装 file-loader 或 url-loader，只需要使用 type: "asset" 即可自动处理资源。

分享到：