feat: 添加 url-loader

前端/Webpack/README.md

@@ -786,9 +786,54 @@ module.exports = {
 
 比如 `name: '[name][hash:6].[ext]'` 表示新的文件名称为 图片原名称 + hash 值的前 6 位 + 图片原后缀
 
+对于一些小的图片，可以使用 `url-loader` 直接将图片转换成 `base64` 嵌入到代码中
+
+```js
+{
+    test: /\.(png|jpg|jpeg|gif|svg)$/,
+    use: [
+        {
+            loader: "url-loader",
+            options: {
+                name: '[name][hash:6].[ext]'
+            }
+        }
+    ]
+}
+```
+
+![](Image/011.png)
+
+在实际开发过程中，更倾向于小的图片使用 base64 跟随网页一同下载显示，大的图片使用使用路径请求
+
+如果大的图片也转换成 base64，会严重影响网页下载速度和渲染速度，进而影响体验
+
+如果全部使用 url 请求，会增加服务器压力
+
+`url-loader` 提供 `limit` 的 `option`，用于限制转换图片的大小
+
+```js
+{
+    test: /\.(png|jpg|jpeg|gif|svg)$/,
+    use: [
+        {
+            loader: "url-loader",
+            options: {
+                name: '[name][hash:6].[ext]',
+                limit: 100 * 1024
+            }
+        }
+    ]
+}
+```
+
+> `limit: 100 * 1024` 表示只有 100kb 以下的图片会转换为 base64
+
 ### 图片处理-新
 
 在 `webpack5` 不需要使用 `file-loader` 来加载图片资源
 
 > 项目 05
 
+使用 **资源模块类型** `asset module type` 的方式来提到之前提到的 `url-loader`、`file-loader` 等
+

前端/Webpack/src/04/package-lock.json

@@ -22,6 +22,7 @@
         "sass": "^1.84.0",
         "sass-loader": "^16.0.4",
         "style-loader": "^4.0.0",
+        "url-loader": "^4.1.1",
         "webpack": "^5.97.1",
         "webpack-cli": "^6.0.1"
       }
@@ -5028,6 +5029,33 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/url-loader": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmmirror.com/url-loader/-/url-loader-4.1.1.tgz",
+      "integrity": "sha512-3BTV812+AVHHOJQO8O5MkWgZ5aosP7GnROJwvzLS9hWDj00lZ6Z0wNak423Lp9PBZN05N+Jk/N5Si8jRAlGyWA==",
+      "dev": true,
+      "dependencies": {
+        "loader-utils": "^2.0.0",
+        "mime-types": "^2.1.27",
+        "schema-utils": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "file-loader": "*",
+        "webpack": "^4.0.0 || ^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "file-loader": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/util-deprecate/-/util-deprecate-1.0.2.tgz",

前端/Webpack/src/04/package.json

@@ -24,6 +24,7 @@
     "sass": "^1.84.0",
     "sass-loader": "^16.0.4",
     "style-loader": "^4.0.0",
+    "url-loader": "^4.1.1",
     "webpack": "^5.97.1",
     "webpack-cli": "^6.0.1"
   }