webpack5（三）file-loader url-loader assetModule的使用file-loader

file-loader

加载图片

下载 npm i file-loader -D
配置使用

module: {
    // 模块配置
    rules: [
      {
        test: /.(png|jpe?g|gif)$/i, // 对图片进行解析
        use: 'file-loader'
      }
    ]
  }

默认输出到根目录并且是hash处理后的文件名。

配置输出文件名称等

module: {
    // 模块配置
    rules: [
      {
        test: /.(png|jpe?g|gif)$/i, // 对图片进行解析
        use: {
          loader: 'file-loader',
          options: {
            name: '/img/[name].[hash:6].[ext]' // /img/原文件名.6位hash.原后缀
          }
        }
      }
    ]
  }

查看其他配置项和占位符

url-loader

加载图片与file-loader区别在可以配置是否转换base64URI，优点在于可以减少http请求

下载 npm install url-loader -D
配置使用

module: {
    // 模块配置
    rules: [
      {
        test: /.(png|jpe?g|gif)$/i, // 对图片进行解析
        use: {
          loader: 'url-loader',
          options: {
            name: '/img/[name].[hash:6].[ext]' // /img/原文件名.6位hash.原后缀
          }
        }
      }
    ]
  }

默认所有图片都进行了base64处理

配置转换base64条件

module: {
    // 模块配置
    rules: [
      {
        test: /.(png|jpe?g|gif)$/i, // 对图片进行解析
        use: {
          loader: 'url-loader',
          options: {
            name: '/img/[name].[hash:6].[ext]', // /img/原文件名.6位hash.原后缀
            limit: 230 * 1024 // 小于230kb的图才转换base64，一般项目中配置8k
          }
        }
      }
    ]
  }

asset module

webpack5 内置资源模块，通过设置模块类型，来替换上述loader

asset/resource 发送一个单独的文件并导出 URL。之前通过使用 file-loader 实现。
asset/inline 导出一个资源的 data URI。之前通过使用 url-loader 实现。
asset/source 导出资源的源代码。之前通过使用 raw-loader 实现。
asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用 url-loader，并且配置资源体积限制实现。

asset/resoource的使用

  module: {
    // 模块配置
    rules: [
      {
        test: /.(png|jpe?g|gif)$/i, // 对图片进行解析
        type: 'asset/resource'
      }
    ]
  }

配置输出文件名方式一：全局统一配置

  output: {
    filename: 'build.js',
    path: path.resolve(__dirname, 'build'),
    assetModuleFilename: 'imgs/[name].[hash:6][ext]' // 统一设置asset module文件名,这里的后缀自带.，所以不用拼接.
  },
  module: {
    // 模块配置
    rules: [
      {
        test: /.(png|jpe?g|gif)$/i, // 对图片进行解析
        type: 'asset/resource',
      }
    ]
  }

方式二：局部配置

module: {
    // 模块配置
    rules: [
      {
        test: /.(png|jpe?g|gif)$/i, // 对图片进行解析
        type: 'asset/resource',
        generator: {
          filename: 'img/[name].[hash:6][ext]'
        }
      }
    ]
  }

asset的使用

默认：小于 8kb 的文件，将会视为 inline 模块类型，否则会被视为 resource 模块类型

module: {
    // 模块配置
    rules: [
      {
        test: /.(png|jpe?g|gif)$/i, // 对图片进行解析
        type: 'asset'
      }
    ]
  }

修改转换条件

module: {
    // 模块配置
    rules: [
      {
        test: /.(png|jpe?g|gif)$/i, // 对图片进行解析
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 50 * 1024 // 50kb
          }
        }
      }
    ]
  }