url-loader和file-loader的区别

最新推荐文章于 2024-05-11 01:18:54 发布

原创最新推荐文章于 2024-05-11 01:18:54 发布 · 612 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#webpack

webpack 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了url-loader和file-loader的区别与用法。url-loader在文件大小低于设定阈值时将其转换为base64编码内置于JS文件中，超过阈值则与file-loader一样将文件输出到指定目录。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

file-loader将图片移动到dist目录(或者outputPath定义的目录)下并返回一个相对于dist的路径

url-loader相比file-loader多了一个limit配置项(1024 = 1kb),在超过limit的时候执行和file-loader相同的功能，当小于limit时会将文件打包成base64文件到js打包文件里

rules: [
    {
      test: /\.(png|jpg|gif)$/,
      use: {
        loader: 'url-loader',
        options: {
          name: '[name]_[hash:6].[ext]',
          outputPath: 'images/',
          // url-loader的limit配置项
          limit: 2048
        }
      }
    }
  ]

url-loader会将图片转成base64文件放在打包js文件里,节约了一次HTTP请求，如果图片太大会导致加载慢（适合小图片）