webpack 图片文件处理:url-loader和file-loader,写给正在求职的前端开发

17 阅读2分钟

最后

前15.PNG

前16.PNG

由于文档内容过多,为了避免影响到大家的阅读体验,在此只以截图展示部分内容

开源分享:docs.qq.com/doc/DSmRnRG… 在这里插入图片描述

1.2、图片文件处理方式2:file-loader


在这里插入图片描述

1.3、图片文件处理-修改文件名称


在这里插入图片描述

在这里插入图片描述

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

在这里插入图片描述

2、安装loader

=========================================================================

安装图片文件处理loader的参考文档

在这里插入图片描述

在这里插入图片描述

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

3、配置

===================================================================

{

test: /.(png|jpg|gif)$/,

use: [

{

loader: 'url-loader',

options: {

limit: 8192

}

}

]

}

在这里插入图片描述

在这里插入图片描述

4、重新打包

=====================================================================

在这里插入图片描述

5、浏览器访问

======================================================================

在这里插入图片描述

最后

前15.PNG

前16.PNG

由于文档内容过多,为了避免影响到大家的阅读体验,在此只以截图展示部分内容

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】