不再需要file-loader / url-loader

Author: javaLuo

package.json

@@ -23,18 +23,18 @@
     "pnp": false
   },
   "dependencies": {
-    "@rematch/core": "^2.1.0",
+    "@rematch/core": "^2.1.1",
     "antd": "^4.16.13",
-    "axios": "^0.23.0",
-    "core-js": "^3.18.3",
+    "axios": "^0.24.0",
+    "core-js": "^3.19.0",
     "history": "^4.10.1",
     "lodash": "^4.17.21",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-loadable": "^5.5.0",
-    "react-redux": "^7.2.5",
+    "react-redux": "^7.2.6",
     "react-router-dom": "^5.3.0",
-    "redux": "^4.1.1"
+    "redux": "^4.1.2"
   },
   "devDependencies": {
     "@babel/core": "^7.15.8",
@@ -51,11 +51,12 @@
     "antd-dayjs-webpack-plugin": "^1.0.6",
     "autoprefixer": "^10.3.7",
     "babel-eslint": "^10.1.0",
-    "babel-loader": "^8.2.2",
+    "babel-loader": "^8.2.3",
     "babel-plugin-import": "^1.13.3",
+    "body-parser": "^1.19.0",
     "clean-webpack-plugin": "^4.0.0",
     "copy-webpack-plugin": "^9.0.1",
-    "css-loader": "^6.4.0",
+    "css-loader": "^6.5.0",
     "css-minimizer-webpack-plugin": "^3.1.1",
     "dayjs": "^1.10.7",
     "eslint": "^7.32.0",
@@ -66,23 +67,21 @@
     "express": "^4.17.1",
     "favicons": "^6.2.2",
     "favicons-webpack-plugin": "^5.0.2",
-    "file-loader": "^6.2.0",
     "happypack": "^5.0.1",
-    "html-webpack-plugin": "^5.3.2",
+    "html-webpack-plugin": "^5.5.0",
     "less": "^4.1.2",
-    "less-loader": "^10.1.0",
-    "mini-css-extract-plugin": "^2.4.2",
+    "less-loader": "^10.2.0",
+    "mini-css-extract-plugin": "^2.4.3",
     "mockjs": "^1.1.0",
-    "postcss": "^8.3.9",
-    "postcss-loader": "^6.1.1",
+    "postcss": "^8.3.11",
+    "postcss-loader": "^6.2.0",
     "prettier": "^2.4.1",
-    "style-loader": "^3.3.0",
+    "style-loader": "^3.3.1",
     "sw-precache-webpack-plugin": "^1.0.0",
     "terser-webpack-plugin": "^5.2.4",
-    "url-loader": "^4.1.1",
-    "webpack": "^5.58.2",
+    "webpack": "^5.60.0",
     "webpack-bundle-analyzer": "^4.5.0",
-    "webpack-cli": "^4.9.0",
+    "webpack-cli": "^4.9.1",
     "webpack-dev-middleware": "^5.2.1",
     "webpack-hot-middleware": "^2.25.1",
     "webpackbar": "^4.0.0",

src/index.js

@@ -1,6 +1,6 @@
 /** APP入口 **/
-import "core-js/stable";
-import "regenerator-runtime/runtime";
+// import "core-js/stable";
+// import "regenerator-runtime/runtime";
 
 import React from "react";
 import ReactDOM from "react-dom";

webpack.dev.config.js

@@ -19,6 +19,7 @@ module.exports = {
     path: __dirname + "/", // 将打包好的文件放在此路径下，dev模式中，只会在内存中存在，不会真正的打包到此路径
     publicPath: PUBLIC_PATH, // 文件解析路径，index.html中引用的路径会被设置为相对于此路径
     filename: "bundle-[contenthash].js", // 编译后的文件名字
+    assetModuleFilename: "assets/[name].[hash:4][ext]",
   },
   devtool: "eval-source-map", // 报错的时候在控制台输出哪一行报错
   optimization: {
@@ -63,28 +64,13 @@ module.exports = {
         // 文件解析
         test: /\.(eot|woff|otf|svg|ttf|woff2|appcache|mp3|mp4|pdf)(\?|$)/,
         include: path.resolve(__dirname, "src"),
-        use: [
-          {
-            loader: "file-loader",
-            options: {
-              name: "assets/[name].[hash:4].[ext]",
-            },
-          },
-        ],
+        type: "asset/resource",
       },
       {
         // 图片解析
-        test: /\.(png|jpg|jpeg|gif)$/i,
+        test: /\.(png|jpg|jpeg|gif)(\?|$)/i,
         include: path.resolve(__dirname, "src"),
-        use: [
-          {
-            loader: "url-loader",
-            options: {
-              limit: 8192,
-              name: "assets/[name].[hash:4].[ext]",
-            },
-          },
-        ],
+        type: "asset",
       },
       {
         // wasm文件解析

webpack.production.config.js

@@ -84,28 +84,13 @@ module.exports = {
         // 文件解析
         test: /\.(eot|woff|otf|svg|ttf|woff2|appcache|mp3|mp4|pdf)(\?|$)/,
         include: path.resolve(__dirname, "src"),
-        use: [
-          {
-            loader: "file-loader",
-            options: {
-              name: "assets/[name].[hash:4].[ext]",
-            },
-          },
-        ],
+        type: "asset/resource",
       },
       {
         // 图片解析
-        test: /\.(png|jpg|jpeg|gif)$/i,
+        test: /\.(png|jpg|jpeg|gif)(\?|$)/i,
         include: path.resolve(__dirname, "src"),
-        use: [
-          {
-            loader: "url-loader",
-            options: {
-              limit: 8192,
-              name: "assets/[name].[hash:4].[ext]",
-            },
-          },
-        ],
+        type: "asset",
       },
       {
         // wasm文件解析