Webpack在开发、打包和优化图片时有哪些处理技巧？

本文共计1364个文字，预计阅读时间需要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 脚本的大小飙升。

打包

为了减小脚本的大小，我们需要告诉 webpack 什么情况下采用 url-loader 去内联图片，什么情况下采用其他的 loader。