阅读 92
webpack5(三)file-loader url-loader assetModule的使用

webpack5(三)file-loader url-loader assetModule的使用

file-loader

加载图片

  1. 下载

npm i file-loader -D

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

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

hash-imgname.png

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

hashdiy.png

查看其他配置项和占位符

url-loader

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

  1. 下载

npm install url-loader -D

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

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

image.png

  • 配置转换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
          }
        }
      }
    ]
  }
复制代码

image.png

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
          }
        }
      }
    ]
  }
复制代码
文章分类
前端
文章标签