url-loader与file-loader的区别（webpack学习篇5）

最新推荐文章于 2024-06-18 09:46:46 发布

-小橙子-

最新推荐文章于 2024-06-18 09:46:46 发布

阅读量3.1k

点赞数 1

分类专栏： Webpack 文章标签： webpack-url-loader与file-loader的区别

本文链接：https://blog.csdn.net/Riona_cheng/article/details/100146467

版权

本文探讨了webpack中url-loader和file-loader在打包图片时的区别。url-loader在图片小于特定尺寸时，会将其转换为base64字符串内联到JS中，减少HTTP请求，提高性能。file-loader则始终将图片作为单独文件输出。文章通过实例配置展示了两者的工作原理，并提供了最佳实践建议。

摘要由CSDN通过智能技术生成

我们知道图片文件的打包，可以通过file-loader来辅助完成，但项目开发中，可能会存在较多的图片，每个图片都会是一个http请求，为了优化性能，推荐一个新的辅助工具：url-loader
接下来说说url-loader相比于file-loader的优势：

使用file-loader打包图片

由于上篇文章（webpack学习篇4）中已经详细介绍了file-loader打包图片的方法，在这里就不介绍那么详细了，主要记录下使用file-loader工具打包后，生成文件的方式：（如下）

打包规则配置rules

webpack.config.js

module: {
   
  rules: [{
   
    test: /\.(jpg|png|jpeg)$/,
    use: {
   
      loader: 'file-loader',
      options: {
    // 配置参数
        // 这种配置语法叫做：占位符
        name