webpack之资源模块

资源模块(asset module)是一种模块类型，它允许使用资源文件（字体，图标等）而无需配置额外 loader。

该部分是用来解决webpack4+的图片，字体等资源的处理。

在 webpack 5 之前，通常使用：

• raw-loader 将文件导入为字符串
• url-loader 将文件作为 data URI 内联到 bundle 中
• file-loader 将文件发送到输出目录

资源模块类型(asset module type)，通过添加 4 种新的模块类型，来替换所有这些 loader：

• asset/resource 发送一个单独的文件并导出 URL。之前通过使用 file-loader 实现。以前使用他来处理打包其他资源的loader。
• asset/inline 导出一个资源的 data URI。之前通过使用 url-loader 实现。以前使用他来打包样式中图片的loader。
• asset/source 导出资源的源代码。之前通过使用 raw-loader 实现。
• asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用 url-loader，并且配置资源体积限制实现。

配置资源模块的输出文件名和路径

仅适用于 asset 和 asset/resource 模块类型。 通过output属性

  output: {
   assetModuleFilename: 'fonts/[name][ext]'
  }

通过loader中的generator属性

 {
    test: /\.(eot|svg|ttf|woff|)$/,
    type: "asset/resource",
    generator: {
      // 输出文件位置以及文件名
      filename: "fonts/[name][ext]"
    },
  },

下面就介绍一下webpack5替代webpack4的打包方案

打包样式或者js中的引入的图片

  {
    //处理图片资源
    test: /\.(jpg|png|gif|)$/,
    type: "asset",
    generator: {
      // 输出文件位置以及文件名
      filename: "images/[name][ext]"
    },
    parser: {
      dataUrlCondition: {
        maxSize: 10 * 1024 //超过10kb不转base64,然后就不会被打包
      }
    }
  },

打包其他资源

{
    exclude: /\.(css|js|html|sass|json|png|gif|jpg|jpeg)$/,
    type: "asset/resource",
    generator: {
      // 输出文件位置以及文件名
      filename: "others/[name][ext]"
    },
},

html中引入的图片资源依旧通过html-loader来打包

  {
    test: /\.html$/,
    loader: 'html-loader'
  },