webpack

在老的版本里面,我们需要使用 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的逻辑,而是直接去引用静态资源

Last modification:March 2, 2022
If you think my article is useful to you, please feel free to appreciate