Webpack—loader之图片打包

2019-08-08 本文已影响3人 Maco_wang

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

一、图片打包

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

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

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

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

image

第三行它提示你需要使用一个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 build命令进行打包即可。

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

image

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

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

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

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

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

image

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

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

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

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

// index.js
var imgSrc = require('../images/1.jpg');

var img = new Image();
img.src = imgSrc;
document.body.appendChild(img);

除了使用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的方式进行打包处理，例如：

image

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