细说 webpack 9. 使用 webpack 处理图片资源

大家好！我是萝卜，今天和大家说一说 webpack 是如何处理图片资源的，前端项目离不开图片资源，Webpack 中图片资源也是可以作为模块直接使用的，下面我们就来看一看。

图片的引入方式

图片是前端项目必不可少的静态资源，在日常开发中，我们可能会在下面三种情况使用图片：

1.HTML 中通过img标签等方式引入；

2.CSS 中通过src等方式引入；

3.JavaScript 中使用图片的 URL 或者内容（比如 Canvas 等）；

最笨最直接的方式就是直接写死线上的地址，例如在页面中，我们引入 <img> 如下:

<img src=”http://cdn.example.com/public/logo.png” />

上面地址的 http://cdn.example.com 是一个 CDN 静态域名，后面是我们完整的路径，这样我们上线的时候地址就可以直接看了，我们线下开发的时候可以提前将静态资源打包好上传到线上。这样操作想想就很费劲，而且 CDN 每次静态资源更新都要需要刷新缓存，如果我们使用 MD5 命名图片的时候就更麻烦了。

我们在 Webpack 中，则可以使用 loader 的方式完成图片的引入。例如在 CSS 文件中，直接相对路径使用背景图片：

.bg-img{
    backgroud: url('./public/logo.png') no-repeat;
}

在 HTML 中也可以直接使用相对路径：

<img src=”./public/logo.png” />

还记得我们之前学过的resolve.alias方式创建一个目录的alias引用，这种方式不仅仅可以在 JavaScript 中使用，在 HTML 和 CSS 中也可以使用的：

// webpack.config.js
module.exports = {    
    resolve: {
        alias: {
            '@assets': Path2D.resolve('./src/assets')
        }    
    }
}

<img src=”@assets/public/logo.png” />

使用 loader 来加载图片资源

怎么使用图片我们了解了，但是怎么让 Webpack 识别图片，并且能够打包输出呢？这时候就需要借助 loader 了，这里有两个 loader 可以使用：file-loader 和 url-loader 。

file-loader和url-loader是经常在一些 Webpack 配置中看到的两个 loader，并且两个 loader 在一定应用场景上是可以相互替代的，但是对于两者的区别，很少有人能够说得清楚，下面介绍下两者的区别。

file-loader：能够根据配置项复制使用到的资源（不局限于图片）到构建之后的文件夹，并且能够更改对应的链接；
url-loader：包含 file-loader 的全部功能，并且能够根据配置将符合配置的文件转换成 Base64 方式引入，将小体积的图片 Base64 引入项目可以减少 http 请求，也是一个前端常用的优化方式。

下面以url-loader为例说明下 Webpack 中使用方法。首先是安装对应的 loader：

npm install -D url-loader

下面我们创建一个项目，目录结构如下：

|---- package.json    # npm package.json
|---- src
|    |---- assets      # 静态资源
|        |---- img     # 图片资源
|             |---- large.png  # 大图片 超过 1M
|             |---- small-01.png  # 小图图片
|             |---- small-02.png  # 大图片 超过 1M
|             |---- small-03.png  # 大图片 超过 1M
|    |---- index.css      # css 文件
|    |---- index.html     # html
|    |---- index.js  # js
|---- webpack.config.js    # webpack 配置

首先我们在index.css中引入 small-01.png:

.bg-img{
    backgroud: url(./assets/img/small.png) no-repeat;
}

然后在index.js中引入了index.css和large.png：

import img from './assets/img/large.png'
import style from './index.css'
console.log(img, style);

最后我们在index.html中通过 img 引入large.png：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <img src="./assets/img/large.png" alt="背景图">
</body>
</html>

这时候我们修改webpack.config.js：

const HTMLPlugin = require('html-webpack-plugin');
 module.exports = {
    mode: 'development',
    entry: './srcindex.js', 
    devtool: false,
    module: {
        rules: [
            {
                test: /\.html$/,
                use: ['html-loader']
            },
            { 
               test: /\.css$/,
               use: ['style-loader', 'css-loader']
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: {
                    loader: 'url-loader'
                }
            }
        ]
    },
    plugins: [
        new HTMLPlugin({
            template: './src/index.html' 
       })
    ]
 }

执行webpack后发现，打包出来的文件都比较大，通过查看内容发现，我们的图片被Base64处理了，然后直接引入了。

这是因为url-loader本身优先是将资源Base64引入的。虽然图片Base64可以减少 http 请求，但是对于1M+这么大的图片都Base64处理，范围增加了 CSS、JavaScript 等文件的大小，而且将这么大的Base64反解成可以使用的图片渲染出来，时间消耗也是很大的。

所以这时候需要使用url-loader的limit选项来控制不超过一定限制的图片才使用Base64：

{
     test: /\.(png|svg|jpg|gif)$/,
     use: {
         loader: 'url-loader'，
         options: {
            imit: 3*1024
         }
     }
 }

这时候再执行webpack，发现多打出一个ad19429dc9b3ac2745c760bb1f460892.png的图片，这张图片就是large.png的图片，因为超过了limit=3*1024显示所以没有被处理成Base64。

继续查看index.html和main.js（index.js打包出来的文件），发现我们使用large.png的地址都被 Webpack 自动替换成了新的路径ad19429dc9b3ac2745c760bb1f460892.png。

配置 CDN 域名

一般静态资源上线的时候都会放到 CDN，假设我们的 CDN 域名和路径为：http://bd.bxstatic.com/img/，这时候只需要修改output.publicPath即可。

小结

这一篇主要介绍 Webpack 的如何处理图片。页面经常用到的图片是页面的重点，Webpack 提供了很多插件和 loader 对图片进行压缩、合并。Webpack 还会使用url-loader等插件，将较小的资源通过 Base64 的方式引入。