webpack入门学习笔记10 —— 在项目中使用图片资源

作者: 振礼硕晨 | 来源:发表于2019-07-28 15:44 被阅读0次

1. 写在前面

在前端项目中，图片是必不可少的一种资源。在使用图片的时候，我们可以有以下几种方式：

在 .html 文件中，通过 <img src="" alt=""> 标签引入图片
在 .css 文件中，通过 background: url() 属性来引入图片
在 .js 文件中，通过 import 或者 require 语法来引入图片

但是在基于webpack的项目中，如果你只是简单的引入，而没有对这些图片文件做一些配置处理的话，是不能成功的。比如，如果你在一个 .js 文件中书写以下代码：

import logo from './logo.png'
console.log(logo);

或者在 .css 文件中，书写以下代码：

body {
    background-color: gray;
    background: url('./logo.png')
}

那么在进行打包编译项目或者启动本地开发服务器的时候，会报出以下错误：

错误提示很明显：我们需要一个合适的loader来处理这些图片文件。

那么在这篇博客中，我们就来讲述一下：如何进行配置webpack，使得图片资源可以在项目中被正常地使用。主要内容包括：

使用 file-loader 处理图片资源
使用 html-withimg-loader 处理图片资源

2. 使用 file-loader 处理图片资源

首先讲述如何使用 file-loader 来处理图片资源，既然是一个loader，那么第一步肯定是安装，安装命令如下：

yarn add file-loader -D

安装完成之后，到 webpack.config.js 文件中进行配置，配置规则非常简单，这里直接给出代码：

module.exports = {
    /* 节省篇幅，其他配置信息已省略 */
    module: {
        rules: [
            {
                test: /\.(png|jpg|jpeg|gif)$/,  // 使用正则匹配文件图片
                use: {
                    loader: 'file-loader'       // 使用file-loader对这些文件进行处理
                }
            }
        ]
    }
}

这里将其他的配置规则省略了，如果你想看其他的配置规则，可以查看我的 GitHub仓库 - webpack-learning ,或者通过本文末尾的链接，跳转到我之前的博客中进行查看。

这里介绍一下 file-loader 的作用：对项目中使用到的图片文件进行处理，将处理后的文件保存到 输出文件夹

，并返回输出文件夹下该文件的 URL 。如此一来，这个文件就可以被正常使用。

下面我们在项目中体验一下这个loader的作用，在一个 .js 文件中书写以下代码，使用图片资源：

import logo from './logo.png'   // 引入图片
console.log(logo);  

let img = new Image();
img.src = logo;

document.getElementsByTagName('body')[0].appendChild(img);

打包编译之后，就可以在页面上看到这样图片了。

同理，在 .css 文件中也可以正常使用图片资源，参考代码如下：

body {
    background-color: gray;
    background: url('./logo.png')
}

如果这时候，你在 .html 文件中 <img src="" alt=""> 标签引入图片，webpack一样会报错。仅靠file-loader做不到这一点，为了解决这个问题，我们需要 在file-loader的基础上，使用下面讲到的loader。

3. 使用 html-withimg-loader 处理图片资源

这个loader的作用是：处理 .html 文件中引用的图片，使得图片能够被正常使用。但是要注意，使用这个loader的时候，同时也要使用上面的 file-loader 。

和上面一样，首先我们要做的还是进行安装，安装命令如下：

yarn add html-withimg-loader -D

安装完成之后，到 webpack.config.js 文件中进行配置，配置规则非常简单，这里直接给出代码：

module.exports = {
    /* 节省篇幅，其他配置信息已省略 */
    module: {
        rules: [
            // 配置 file-loader
            {
                test: /\.(png|jpg|jpeg|gif)$/,   
                use: {
                    loader: 'file-loader'    
                }
            },
            // 配置 html-withimg-loader
            {
                test: /\.html$/,
                use: 'html-withimg-loader'
            }
        ]
    }
}

配置完成之后，我们就可以在 .html 文件中正常使用图片，比如以下代码：

<!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>
    <!-- 引入logo.png图片 -->
    <img src="./logo.png" alt="">       
    
</body>
</html>

现在进行打包编译项目，得到编译后的 index.html 文件代码如下：

<!DOCTYPE html>
<html lang=en>

<head>
    <meta charset=UTF-8>
    <meta name=viewport content="width=device-width,initial-scale=1">
    <meta http-equiv=X-UA-Compatible content="ie=edge">
    <title>Document</title>
</head>

<body>
    <!-- 注意这里的图片引用路径不再是logo.png -->
    <!-- 这个路径是 file-loader 对文件处理后生成新文件的路径 -->
    <img src=2b9a35ac93ae4d5ea1eb21230d61c324.png alt="">
</body>

</html>

这个时候在浏览器中打开编译后的 index.html 文件，就可以看到我们的图片了。

4. 优化图片处理方式，减少http请求

在编写前端项目的过程中，我们可能会用到很多图片资源，有些图片非常小，只有几KB。但是这些小图片的数量有时却非常大，有的项目中可能有几十个甚至是上百个图片。

这就会导致一个问题：项目上线之后，为了请求这些图片资源，浏览器端会大量使用http请求来获取图片，这就可能导致浏览器的开销过大，性能较低。那么怎么来解决这个问题呢？

这里我们介绍一种编码方式——Base64编码。这不是一种加密解密方式，它是一种编码方式。简单来说，它的作用就是：使用字符来表示任意二进制文件（这些字符包括：A B ... Z a b ... z 0 1 ... 9 + / 等64个字符）。

为了更加贴切的体会Base64编码，你可以复制以下长长的Base64编码，粘贴到浏览器地址栏，便可以看到这段Base64编码表示的图片了。

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABEYAAAJmCAIAAADephJOAAAACXBIWXMAAAsTAAALEwEAmpwYAAAL/WlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDIgNzkuMTYwOTI0LCAyMDE3LzA3LzEzLTAxOjA2OjM5ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtbG5zOnRpZmY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vdGlmZi8xLjAvIiB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgKFdpbmRvd3MpIiB4bXA6Q3JlYXRlRGF0ZT0iMjAxOC0wNC0wNVQyMzozNToxOCswODowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAxOC0wNC0wNlQxODoxMjozOCswODowMCIgeG1wOk1vZGlmeURhdGU9IjIwMTgtMDQtMDZUMTg6MTI6MzgrMDg6MDAiIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjBkYjNhYzExLWQ3ZmUtZWE0YS1iZDFlLWZmNmNiY2Q0YWYwYSIgeG1wTU06RG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjYyMTkyMzgzLWRhMWQtNTA0MC1hZTA4LTlmNWViN2M5ZGFlMyIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjVkZGZmMjVhLTAxMWMtM2I0NS05NmU5LWQyMjE2ZTc3NjM2ZCIgdGlmZjpPcmllbnRhdGlvbj0iMSIgdGlmZjpYUmVzb2x1dGlvbj0iNzIwMDAwLzEwMDAwIiB0aWZmOllSZXNvbHV0aW9uPSI3MjAwMDAvMTAwMDAiIHRpZmY6UmVzb2x1dGlvblVuaXQ9IjIiIGV4aWY6Q29sb3JTcGFjZT0iNjU1MzUiIGV4aWY6UGl4ZWxYRGltZW5zaW9uPSI1MDYiIGV4aWY6UGl4ZWxZRGltZW5zaW9uPSIyODQiPiA8cGhvdG9zaG9wOlRleHRMYXllcnM+IDxyZGY6QmFnPiA8cmRmOmxpIHBob3Rvc2hvcDpMYXllck5hbWU9IuaMr+ekvOehleaZqCIgcGhvdG9zaG9wOkxheWVyVGV4dD0i5oyv56S856GV5pmoIi8+IDxyZGY6bGkgcGhvdG9zaG9wOkxheWVyTmFtZT0iRE9NT1JFIURPQkVUVEVSISIgcGhvdG9zaG9wOkxheWVyVGV4dD0iRE9NT1JFIURPQkVUVEVSISIvPiA8cmRmOmxpIHBob3Rvc2hvcDpMYXllck5hbWU9IuaMr+ekvOehleaZqCIgcGhvdG9zaG9wOkxheWVyVGV4dD0i5oyv56S856GV5pmoIi8+IDxyZGY6bGkgcGhvdG9zaG9wOkxheWVyTmFtZT0iRE9NT1JFIURPQkVUVEVSISIgcGhvdG9zaG9wOkxheWVyVGV4dD0iRE9NT1JFIURPQkVUVEVSISIvPiA8L3JkZjpCYWc+IDwvcGhvdG9zaG9wOlRleHRMYXllcnM+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNyZWF0ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6NWRkZmYyNWEtMDExYy0zYjQ1LTk2ZTktZDIyMTZlNzc2MzZkIiBzdEV2dDp3aGVuPSIyMDE4LTA0LTA1VDIzOjM1OjE4KzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgKFdpbmRvd3MpIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDpiNTliMjE3Zi04YzQwLTg4NDUtYjYyNS05YzA0NTJjOGYyOGEiIHN0RXZ0OndoZW49IjIwMTgtMDQtMDZUMTc6MzA6MjQrMDg6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAoV2luZG93cykiIHN0RXZ0OmNoYW5nZWQ9Ii8iLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOmU2MDdkZDMzLTIwYTAtMzk0OC1hZGRhLTRhMTNjNjc2NzNlMSIgc3RFdnQ6d2hlbj0iMjAxOC0wNC0wNlQxODoxMjozOCswODowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY29udmVydGVkIiBzdEV2dDpwYXJhbWV0ZXJzPSJmcm9tIGFwcGxpY2F0aW9uL3ZuZC5hZG9iZS5waG90b3Nob3AgdG8gaW1hZ2UvcG5nIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJkZXJpdmVkIiBzdEV2dDpwYXJhbWV0ZXJzPSJjb252ZXJ0ZWQgZnJvbSBhcHBsaWNhdGlvbi92bmQuYWRvYmUucGhvdG9zaG9wIHRvIGltYWdlL3BuZyIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6MGRiM2FjMTEtZDdmZS1lYTRhLWJkMWUtZmY2Y2JjZDRhZjBhIiBzdEV2dDp3aGVuPSIyMDE4LTA0LTA2VDE4OjEyOjM4KzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgKFdpbmRvd3MpIiBzdEV2dDpjaGFuZ2VkPSIvIi8+IDwvcmRmOlNlcT4gPC94bXBNTTpIaXN0b3J5PiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDplNjA3ZGQzMy0yMGEwLTM5NDgtYWRkYS00YTEzYzY3NjczZTEiIHN0UmVmOmRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDpiNGNlOGExNS0wNDJjLTNkNDgtYWVhZi02NTlmYzMyNmI2ODQiIHN0UmVmOm9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo1ZGRmZjI1YS0wMTFjLTNiNDUtOTZlOS1kMjIxNmU3NzYzNmQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7uAuQDAAArTklEQVR4nO3da5xV5X3o8TUz4FwYHBhQQBACkZtIERUURYrBYLwkITapCTHxmBwbk5z0eNKY9JImTXpOWmvS+kla23xS48nNU02jtImXmNDSEUVRgRERYRQK8YbgADIwM9zmvNjNznJmmNkzs2cWf/1+P7yY2bP2s5+9fbN/Pms9q2TnzpYEAAAgptKsJwAAANB7kgYAAAhM0gAAAIFJGgAAIDBJAwAABCZpAACAwCQNAAAQmKQBAAACkzQAAEBgkgYAAAhM0gAAAIFJGgAAIDBJAwAABCZpAACAwCQNAAAQmKQBAAACkzQAAEBgkgYAAAhM0gAAAIFJGgAAIDBJAwAABCZpAACAwCQNAAAQmKQBAAACkzQAAEBgkgYAAAhM0gAAAIFJGgAAIDBJAwAABCZpAACAwCQNAAAQmKQBAAACkzQAAEBgkgYAAAhM0gAAAIFJGgAAIDBJAwAABCZpAACAwCQNAAAQmKQBAAACkzQAAEBgkgYAAAhM0gAAAIFJGgAAIDBJAwAABCZpAACAwCQNAAAQmKQBAAACkzQAAEBgkgYAAAhM0gAAAIFJGgAAIDBJAwAABCZpAACAwCQNAAAQmKQBAAACkzQAAEBgkgYAAAhM0gAAAIFJGgAAIDBJAwAABCZpAACAwCQNAAAQmKQBAAACkzQAAEBgkgYAAAhM0gAAAIFJGgAAIDBJAwAABCZpAACAwCQNAAAQmKQBAAACkzQAAEBgkgYAAAhM0gAAAIFJGgAAIDBJAwAABCZpAACAwCQNAAAQmKQBAAACkzQAAEBgkgYAAAhM0gAAAIFJGgAAIDBJAwAABCZpAACAwCQNAAAQmKQBAAACkzQAAEBgkgYAAAhM0gAAAIFJGgAAIDBJAwAABCZpAACAwCQNAAAQmKQBAAACkzQAAEBgkgYAAAhM0gAAAIFJGgAAIDBJAwAABCZpAACAwCQNAAAQmKQBAAACkzQAAEBgkgYAAAhM0gAAAIFJGgAAIDBJAwAABCZpAACAwCQNAAAQmKQBAAACkzQAAEBgkgYAAAhM0gAAAIFJGgAAIDBJAwAABCZpAACAwCQNAAAQmKQBAAACkzQAAEBgkgYAAAhM0gAAAIFJGgAAIDBJAwAABCZpAACAwCQNAAAQmKQBAAACkzQAAEBgkgYAAAhM0gAAAIFJGgAAIDBJAwAABCZpAACAwCQNAAAQmKQBAAACkzQAAEBgkgYAAAhM0gAAAIFJGgAAIDBJAwAABCZpAACAwCQNAAAQmKQBAAACkzQAAEBgkgYAAAhM0gAAAIFJGgAAIDBJAwAABCZpAACAwCQNAAAQmKQBAAACkzQAAEBgkgYAAAhM0gAAAIFJGgAAIDBJAwAABCZpAACAwCQNAAAQmKQBAAACkzQAAEBgkgYAAAhM0gAAAIFJGgAAIDBJAwAABCZpAACAwCQNAAAQmKQBAAACkzQAAEBgkgYAAAhM0gAAAIFJGgAAIDBJAwAABCZpAACAwCQNAAAQmKQBAAACkzQAAEBgkgYAAAhM0gAAAIFJGgAAIDBJAwAABCZpAACAwCQNAAAQmKQBAAACkzQAAEBgkgYAAAhM0gAAAIFJGgAAIDBJAwAABCZpAACAwCQNAAAQmKQBAAACkzQAAEBgkgYAAAhM0gAAAIFJGgAAIDBJAwAABCZpAACAwCQNAAAQmKQBAAACkzQAAEBgkgYAAAhM0gAAAIFJGgAAIDBJAwAABCZpAACAwCQNAAAQmKQBAAACkzQAAEBgkgYAAAhM0gAAAIFJGgAAIDBJAwAABCZpAACAwCQNAAAQmKQBAAACkzQAAEBg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ABCYpAEAAAKTNAAAQGCSBgAACEzSAAAAgUkaAAAgMEkDAAAEJmkAAIDAJA0AABCYpAEAAAKTNAAAQGCSBgAACEzSAAAAgUkaAAAgMEkDAAAEJmkAAIDAJA0AABCYpAEAAAKTNAAAQGCSBgAACEzSAAAAgUkaAAAgMEkDAAAEJmkAAIDAJA0AABCYpAEAAAKTNAAAQGCSBgAACEzSAAAAgUkaAAAgMEkDAAAEJmkAAIDAJA0AABCYpAEAAAKTNAAAQGCSBgAACEzSAAAAgUkaAAAgMEkDAAAEJmkAAIDAJA0AABCYpAEAAAKTNAAAQGCSBgAACEzSAAAAgUkaAAAgMEkDAAAEJmkAAIDAJA0AABCYpAEAAAKTNAAAQGCSBgAACEzSAAAAgUkaAAAgMEkDAAAEJmkAAIDAJA0AABCYpAEAAAKTNAAAQGCSBgAACEzSAAAAgUkaAAAgMEkDAAAEJmkAAIDAJA0AABCYpAEAAAKTNAAAQGCSBgAACEzSAAAAgUkaAAAgMEkDAAAEJmkAAIDAJA0AABCYpAEAAAKTNAAAQGCSBgAACEzSAAAAgUkaAAAgMEkDAAAEJmkAAIDAJA0AABCYpAEAAAKTNAAAQGCSBgAACEzSAAAAgUkaAAAgMEkDAAAEJmkAAIDAJA0AABCYpAEAAAKTNAAAQGCSBgAACEzSAAAAgUkaAAAgMEkDAAAEJmkAAIDAJA0AABCYpAEAAAKTNAAAQGCSBgAACEzSAAAAgUkaAAAgMEkDAAAEJmkAAIDAJA0AABCYpAEAAAKTNAAAQGCSBgAACEzSAAAAgUkaAAAgMEkDAAAEJmkAAIDAJA0AABCYpAEAAAKTNAAAQGCSBgAACEzSAAAAgUkaAAAgMEkDAAAEJmkAAIDAJA0AABCYpAEAAAKTNAAAQGCSBgAACEzSAAAAgUkaAAAgMEkDAAAEJmkAAIDAJA0AABDY/wfOJNyGtUsLSgAAAABJRU5ErkJggg==

使用Base64对图片进行编码，就可以将这些图片切入到静态的 .html 文件中，这样就不需要再使用http请求来获取图片了，从而节省浏览器开销，提高性能。

为了在基于Webpack的项目中使用Base64编码处理图片，我们需要使用 url-loader 来进行处理。首先安装该loader，安装命令如下：

yarn add url-loader -D

安装完成之后，我们到 webpack.config.js 文件中进行相关配置，配置非常简单，代码如下：

module.exports = {
   /* 节省篇幅，其他的配置信息已省略 */
    module: {
        rules: [
            {
                test: /\.(png|jpg|jpeg|gif)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 200*1024     // 小于200k的图片，使用Base64进行处理
                    }
                }
            }
        ]
    }
}

上述配置非常好理解：对于png、jpg等图片格式的资源，使用url-loader进行处理，如果图片小于200k，那么就是用Base64进行编码；如果图片大于200k，就不做处理，使用http请求来获取图片。

配置完成之后，当我们编译项目时，就会在生成的 .html 文件中看到使用Base64编码后的图片，由于内容较多，就不贴代码，想查看的编译后代码的同学，可以点击 Github连接 进行查看。

5. 写在最后

这是本篇博客的全部内容，关于 file-loader 的更多知识，推荐大家访问 webpack官网 - file-loader 。

webpack入门学习笔记10 —— 在项目中使用图片资源

1. 写在前面

2. 使用 file-loader 处理图片资源

3. 使用 html-withimg-loader 处理图片资源

4. 优化图片处理方式，减少http请求

5. 写在最后

上一篇: webpack入门学习笔记09 —— 在项目中引入全局变量

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Webpack 入门级教程