关于webpack4:webpack4和webpack5打包资源文件配置差异

我的项目中会有一些资源文件，比方图片资源，字体资源文件等。这些文件在打包的时候须要挪动到 dist 目录
webpack4 中，打包这些资源文件，须要用到url-loader 和file-loader,
file-loader把文件输入到一个文件夹中，在代码中通过绝对 URL 去援用输入的文件 (解决图片和字体)
url-loader与 file-loader 相似，区别是用户能够设置一个阈值，大于阈值会交给 file-loader 解决，小于阈值时返回文件 base64 模式编码 (解决图片和字体)

      {test: /\.(png|svg|gif|jpe?g)$/,
        use: [
           {
             loader: "url-loader",
             options: {name: "img/[name].[hash:8].[ext]",
               // outputPath:'img'
               limit: 1024 * 10,
             },
           },
         ],
    }

webpack5 中内置了解决资源文件的模块 asset，不再须要file-loader 和url-loader。

• asset/resource –>file-loader(输入门路)
• asset/inline —>url-loader（所有 data uri）
• asset/source —>raw-loader
• asset（parser）

webpack5 中如果用 require 加载图片，须要提取 default 属性能力拿到资源
Img.src = require("test.png").default; 或者要在 css-loader 中配置
esModule 属性为false

      {
        test: /\.css$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              importLoaders: 1, // 回退一步
              esModule: false,
            },
          },
          "postcss-loader",
        ],
      },

图片资源文件解决如下

      {test: /\.(png|svg|gif|jpe?g)$/,
        type: "asset/resource",
        generator: {filename: "img/[name].[hash:8][ext]",
        },
      },

或者换成行内嵌入到 js 代码中

      {test: /\.(png|svg|gif|jpe?g)$/,
        type: "asset/inline",
      },

也能够配置如下

      {test: /\.(png|svg|gif|jpe?g)$/,
        type: "asset",
        generator: {filename: "img/[name].[hash:8][ext]",
        },
        parser: {
          dataUrlCondition: {maxSize: 30 * 1024,},
        },
      },
      {test: /\.(ttf|woff2?)$/,
        type: "asset/resource",
        generator: {filename: "font/[name].[hash:3][ext]",
        },
      },