webpack 图片文件处理：url-loader和file-loader

小码哥呀

已于 2022-02-15 13:48:41 修改

阅读量1.1k

点赞数

分类专栏： VUE 文章标签： webpack 前端 node.js

于 2022-02-15 13:45:51 首次发布

本文链接：https://blog.csdn.net/qq_46112274/article/details/122940667

版权

62 篇文章 9 订阅

订阅专栏

本文详细讲解了如何使用Webpack对图片进行url-loader和file-loader的配置，包括图片大小限制、文件名处理，以及不同情况下的加载策略。从loader安装到实际应用，适合前端开发者理解并实践图片资源管理。

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

1、webpack 图片文件处理

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述生成的文件存放位置及名字

在这里插入图片描述

npm install --save-dev url-loader@1.1.2

{
 test: /\.(png|jpg|gif)$/,
  use: [
    {
      loader: 'url-loader',
      options: {
        limit: 8192
      }
    }
  ]
}

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
这时需要在项目中安装file-loader

在这里插入图片描述
安装成功：

在这里插入图片描述

关注

专栏目录