Webpack在开发、打包和优化过程中是如何处理图片资源的？

本文共计1388个文字，预计阅读时间需要6分钟。

从《webpack book》的Loading Assets一节中延申出来。在优化前端项目体验中，非常重要的一点是静态资源的优化。这是由于浏览器客户端在相同域名下对同一资源的请求有缓存限制。因此，优化静态资源有助于提升加载速度。例如，如果资源过多，可能会导致加载缓慢。

从 webpack book 的 Loading Assets 一章中延申出来。

改善前端项目体验中，很重要的点就是静态资源的优化。它是由于浏览器客户端在同一时间针对同一 域名 的请求有一定资源限制。如果资源过多、过大就会使得页面卡顿。

静态资源中，又以图片最为典型。那么我们在开发中该如何处理图片呢？

webpack 是前端较为常用的手脚架工具，本文以它为例。

主要分为 开发 、 打包 、 优化 三个方面来介绍

示例地址: webpack demo

开发

webpack 可以用使用url-loader 将静态图片转化为 base64 编码的字符串，并内联在对应的脚本中。大幅度地较少了页面的请求数，所以在开发阶段可以无限制地使用。具体方法

// npm install url-loader --save-dev rules: [{ test: /\.(png|jpg)$/, use: { loader: 'url-loader', }, }]

以 demo-example 为例，Gakki.jpg 被转化为了 base 64 编码的图片。在开发阶段，没什么问题，但是如果在实际环境中，会发现一个很大的问题，将图片越大转化为base 64 编码的字符串就越长，将会导致整个 Js 脚本的大小飙升。