1. Write at the front
Images are an essential resource in a front-end project. We can use pictures in the following ways:
- In the.html file, import the image with the
tag
- In the.css file, the image is introduced through the background: URL () property
- In the.js file, use the import or require syntax to import images
But in a WebPack-based project, if you simply import the image files without doing some configuration, it won’t work. For example, if you write the following code in a.js file:
import logo from './logo.png'
console.log(logo);
Copy the codeOr in the.css file, write the following code:
body {
background-color: gray;
background: url('./logo.png')}Copy the codeThe following error is reported when the project is packaged and compiled or the local development server is started:
The error message is obvious: we need a proper loader to process these image files.
In this blog post, we will show you how to configure WebPack so that image resources can be used properly in your project. The main contents include:
- Use file-loader to process image resources
- Use htML-withimg-loader to process image resources
2. Use file-loader to process image resources
How to use file-loader to process image resources?
yarn add file-loader -D
Copy the codeAfter installation, go to the webpack.config.js file to configure, the configuration rules are very simple, here directly give the code:
module.exports = {
/* To save space, other configuration information is omitted */
module: {
rules: [{test: /\.(png|jpg|jpeg|gif)$/.// Use the re to match the file image
use: {
loader: 'file-loader' // Use file-loader to process these files}}]}}Copy the codeThe rest of the configuration rules are omitted here, but if you want to see other configuration rules, check out my GitHub repository – webpack-Learning, or jump to my previous blog at the end of this article.
File-loader processes the image files used in the project and saves the processed files to the output folder
And returns the URL of the file in the output folder. This way, the file can be used normally.
Here’s a taste of what loader can do in a project: write the following code in a.js file, using image resources:
import logo from './logo.png' // Import images
console.log(logo);
let img = new Image();
img.src = logo;
document.getElementsByTagName('body') [0].appendChild(img);
Copy the codeOnce packaged and compiled, you should see this image on the page.
In the same way, image resources can be used normally in.css files.
body {
background-color: gray;
background: url('./logo.png')}Copy the codeWebpack will also report an error if you import an image with the 
3. Use HTML-withimg-loader to process image resources
This loader is used to process images referenced in.html files so that they can be used normally. Note, however, that using this loader should also use the file-loader above.
As above, the first thing we need to do is to install. The installation command is as follows:
yarn add html-withimg-loader -D
Copy the codeAfter installation, go to the webpack.config.js file to configure, the configuration rules are very simple, here directly give the code:
module.exports = {
/* To save space, other configuration information is omitted */
module: {
rules: [
/ / configuration file - loader
{
test: /\.(png|jpg|jpeg|gif)$/.use: {
loader: 'file-loader'}},/ / configure HTML - withimg - loader
{
test: /\.html$/.use: 'html-withimg-loader'}}}]Copy the codeOnce configured, we can use images normally in.html files, such as the following code:
<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>
<! PNG image -->
<img src="./logo.png" alt="">
</body>
</html>
Copy the codeNow package the compiled project and get the compiled index.html file code as follows:
<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>
<! -- Notice that the image reference path is no longer logo.png -->
<! -- this is the path where file-loader generates a new file after processing the file -->
<img src=2b9a35ac93ae4d5ea1eb21230d61c324.png alt="">
</body>
</html>
Copy the codeAt this point, open the compiled index.html file in your browser and you’ll see our image.
4. Optimize image processing to reduce HTTP requests
When writing a front-end project, we may use many image resources, some of which are very small, only a few kilobytes. However, the number of these small images can be very large, and some projects can have dozens or even hundreds of images.
This leads to a problem: after the project goes live, in order to request these image resources, the browser side will use A large number of HTTP requests to obtain images, which may lead to excessive browser overhead and low performance. So how to solve this problem?
Here we introduce a encoding method – Base64 encoding. This is not an encryption or decryption method, it is an encoding method. Simply put, it is used to represent any binary file using characters (such as A, B… Z a b … z 0 1 … 9 + / etc 64 characters).
To get a better feel for the Base64 encoding, you can copy the following long Base64 encoding and paste it into your browser’s address bar to see the image represented by the Base64 encoding.
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==
Copy the codeBy using Base64 to encode images, you can cut them into static.html files, eliminating the need for HTTP requests to retrieve images, saving browser overhead and improving performance.
To process images using Base64 encoding in a WebPack-based project, we need to use urL-loader for processing. Install loader. Run the following command to install loader:
yarn add url-loader -D
Copy the codeAfter the installation, we went to the webpack.config.js file for the relevant configuration, the configuration is very simple, the code is as follows:
module.exports = {
/* Other configuration information is omitted */ to save space
module: {
rules: [{test: /\.(png|jpg|jpeg|gif)$/.use: {
loader: 'url-loader'.options: {
limit: 200*1024 // For images smaller than 200K, use Base64}}}]}}Copy the codeThe rest of the configuration rules are omitted here, but if you want to see other configuration rules, check out my GitHub repository – webpack-Learning, or jump to my previous blog at the end of this article.
The above configuration is very easy to understand: For PNG, JPG and other image format resources, use urL-loader to process, if the image is less than 200K, then use Base64 encoding. If the image is larger than 200K, no processing is done and an HTTP request is used to fetch the image.
After the configuration is completed, when we compile the project, we will see the Base64 encoded image in the generated.html file. Due to the large content, we will not post the code. If you want to view the compiled code, you can click Github link to view it.
5. Write at the end
This is the end of this blog. For more information about file-loader, please visit webpack’s official website – file-loader.