Webpack轻松入门（三）——图片打包

我们知道，在Webpack中，js文件类型是能够被识别并直接打包的，而其他文件类型（如CSS和图片等）则需要通过特定的loader来进行加载打包。

上一节我们讲到如何使用css-loader和style-loader两个loader来打包CSS代码，这次我将继续讲解如何使用loader将图片类型文件进行打包处理。

一、上节回顾

为了让大家思路更加明朗，我还是先将上一节结束时的目录结构和一些关键文件内容展示一下吧。

目录结构

webpack.config.js：

module.exports = {
    entry: './src/scripts/index.js',   // 打包入口
    output: {
        path: __dirname + '/dist',    // 输出路径
        filename: 'scripts/index.js'     // 输出文件名
    },    module: {
        rules: [    // 其中包含各种loader的使用规则
            {
                test: /\.css$/,  // 正则表达式，表示打包.css后缀的文件
                use: ['style-loader','css-loader']   // 针对css文件使用的loader，注意有先后顺序，数组项越靠后越先执行
            }
        ]
    },
    watch: true    // 监听文件改动并自动打包};

index.js：

var module = require('./module.js');require('../css/style.css');

二、图片打包

图片打包关键要用到file-loader或url-loader，其中url-loader与file-loader功能基本一致，只不过url-loader能将小于某个大小的图片进行base64格式的转化处理。

1. CSS中的图片

比如，我现在在src目录下新增一个images文件夹，再在images中添加一张图片“1.jpg”。然后我在style.css中添加以下代码：

html{ height: 100%; background: url("../images/1.jpg") no-repeat center;}

如果这时直接进行打包，那么肯定会报错，比如像这样的：

第三行它提示你需要使用一个loader来处理图片这种类型的文件，这时，我们只需把file-loader装上，并在webpack.config.js中添加相应配置就ok了。

① 输入命令安装file-loader

npm i -D file-loader

② 在webpack.config.js中的rules数组中添加file-loader的相关配置

{    test: /\.(png|jpg|gif|svg)$/,
    use: ['file-loader']
}

其实对于只有单个loader的，我们还可以将其简化成下面这样：

{    test: /\.(png|jpg|gif|svg)$/,
    loader: 'file-loader'}

接下来，我们只需执行npm start命令进行打包即可。

虽然我们已经将图片但是打包后，我们会发现打包后的图片名发生了变化：

那么如何才能保持图片名不变，而且也能够添加到指定目录下呢？

我们只需要再添加一个options属性即可：

{    test: /\.(png|jpg|gif|svg)$/,
    loader: 'file-loader',
    options: {
        name: 'images/[name].[ext]'
    }
}

其中name属性其实就是图片打包后的路径，其中包括图片名（[name]）和图片格式（[ext]）。

此时打包后的dist目录结构如下：

2. JS中的图片

file-loader能自动识别CSS代码中的图片路径并将其打包至指定目录，但是JS就不同了，我们来看下面的例子。

// index.jsvar img = new Image();
img.src = '../images/1.jpg';document.body.appendChild(img);

如果不使用Webpack打包，正常情况下只要路径正确图片是能够正常显示的。然而，当使用Webpack打包后，我们会发现图片并未被成功打包到dist目录，自然图片也无法显示出来。

这其实是因为Webpack并不知道'../images/1.jpg'是一张图片，如果要正常打包的话需要先将图片资源加载进来，然后再将其作为图片路径添加至图片对象。具体代码如下：

// index.jsvar imgSrc = require('../images/1.jpg');var img = new Image();
img.src = imgSrc;document.body.appendChild(img);

3. 浅谈url-loader

除了使用file-loader对图片进行打包处理外，我们同样也可以使用url-loader代替，另外我们还可以对小于某个大小的图片进行base64格式的转化处理。

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

这里limit属性的作用就是将小于8192B（8.192K）大小的图片转成base64格式，而大于这个大小的图片将会以file-loader的方式进行打包处理，例如：

当然，如果不写limit属性，那么url-loader就会默认将所有图片转成base64。

小贴士: 当我们配置watch为true进行打包后，Webpack会一直处于监听状态，然而当更改webpack.config.js后我们仍需要重新进行打包操作，这时我们只需在控制台简单的按下Ctrl+C后根据提示输入字母y回车确定即可成功退出监听状态。

本文重点总结

① 使用file-loader或url-loader可对图片进行打包操作
② url-loader可将图片转成base64格式

作者：前端王睿
链接：https://www.jianshu.com/p/43c2216ef004