webpack5中已经内置了file-loader和url-loader，只需要简单配置就可以实现图片资源处理

    module.exports = {
      module: {
        rules: [
          {
            test: /.(png|jpe?g|gif|webp|svg)$/i, // 匹配图片资源
            type: 'asset', // asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用 url-loader，并且配置资源体积限制实现
            parser: {
                dataUrlCondition: { 
                    // 小于10kb的图片转为base64
                    // 优点：减少请求，缺点：提交变大
                    maxSize: 10 * 1024 
                }
            },
            generator: {
                // 输出路径
                filename: 'static/[hash][ext][query]'
            }
          },
          {
            test: /.(ttf|woff2?|mp3|mp4|avi)$/i, // 匹配静态资源文件，不做任何处理只移动
            type: 'asset/resource',
            generator: {
                // 输出路径, 取hash前10位
                filename: 'static/[hash:10][ext][query]'
            }
          }
        ]
      }
    };