在老的版本里面，我们需要使用 file-loader去处理静态资源并且导出url，然后用url-loader去关联静态资源，然后可以配置小于一定的直接打成base64，通过raw-loader去处理资源的源代码

在新版本中，使用asset模块去处理这些静态资源

module: {
    rules: [
        ...
      // 静态资源
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        type: 'asset',
        generator: {
          filename: "asset/img/[name]_[hash:6][ext]" // 指定文件名格式以及目录
        },
        parser: {
          dataUrlCondition: {
            maxSize: 20 * 1024 // 20kb  指定大小 小于该值则使用inline模式
          }
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        type: 'asset',
        generator: {
          filename: "asset/audio/[name]_[hash:6][ext]" 
        },
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024
          }
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        type: 'asset',
        generator: {
          filename: "asset/font/[name]_[hash:6][ext]"
        },
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024 
          }
        }
      }
            ...
    ],
  },

关于assets modules替代的loader

• asset/resource 将资源分割为单独的文件，并导出url，就是之前的 file-loader的功能
• asset/inline 将资源导出为dataURL（url(data:)）base64的形式，之前的 url-loader的功能.
• asset/source 将资源导出为源码（source code）,例如txt，就是之前的 raw-loader 功能.
• asset 自动选择导出为单独文件或者 dataURL形式（默认为8KB）. 之前有url-loader设置asset size limit 限制实现。

type里面不要写asset/resource,否则不会去走dataUrlCondition的逻辑，而是直接去引用静态资源