Everybody is good! I am radish, today and we say that webpack is how to deal with the picture resources, the front end project can not leave the picture resources, the picture resources in Webpack can also be used as a module directly, let’s take a look.

The way images are introduced

Images are an essential static resource for a front-end project, and in daily development we might use them in one of three ways:

1.HTML through the IMG tag;

2. Use SRC to import the CSS.

3. Use the URL or content of the image (such as Canvas, etc.) in JavaScript;

The clumsiest and most direct way is to write the dead-line address directly. For example, in the page, we introduce
as follows: 

< img SRC = "http://cdn.example.com/public/logo.png" / >Copy the code
http://cdn.example.com in the address above is a CDN static domain name, followed by our complete path, so that we can see the address directly when we go online, and we can pack the static resources in advance and upload them online when we develop offline. This operation is very difficult to think about, and the CDN needs to refresh the cache every static resource update, if we use MD5 name image more trouble.

In Webpack, we can use loader to complete the import of images. For example, in a CSS file, use a background image directly relative to the path: 

.bg-img{
    backgroud: url('./public/logo.png') no-repeat;
} Copy the code
You can also use relative paths directly in HTML: 

< img SRC = "/ public/logo PNG" / >Copy the code
Remember that resolve. Alias creates an alias reference to a directory, not only in JavaScript, but also in HTML and CSS: 

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


< img SRC = "@ assets/public/logo PNG" / >Copy the code

Use loader to load image resources

We know how to use images, but how to make Webpack recognize images and be able to package output? In this case, you need to use loader. There are two loaders: file-loader and url-loader.

File-loader and URl-loader are two loaders commonly seen in some Webpack configurations, and the two loaders can be replaced by each other in certain application scenarios. However, few people can explain their differences clearly. The following are the differences between the two loaders.

  • File-loader: can copy used resources (not limited to images) to the built folder according to the configuration item, and can change the corresponding links;
  • Url-loader: contains all functions of file-loader and can import files that meet the configuration into Base64 based on the configuration. Importing small-volume images into projects using Base64 can reduce HTTP requests and is a common front-end optimization method.
The following uses urL-loader as an example to describe how to use Webpack. Install the corresponding loader: 

npm install -D url-loader Copy the code
Let’s create a project with the following directory structure: 

| -- package. Json # NPM package. Json | - SRC | | - static resource assets # | | - img # image resources | | - large. PNG # big picture more than 1 m | | - small - 01. PNG # inset image | | - small - 02. PNG # big picture more than 1 m | | - small - 03. PNG # big picture more than 1 m | | - index. The CSS # CSS file . | | - index HTML # HTML | | - index. The js # js | -- webpack. Config. Js # webpack configurationCopy the code
First we introduce small-01.png in index.css: 

.bg-img{
    backgroud: url(./assets/img/small.png) no-repeat;
}Copy the code
Then index. CSS and large.png are introduced in index.js: 

import img from './assets/img/large.png'
import style from './index.css'
console.log(img, style);Copy the code
Finally we introduce large.png via img in index.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>
    <img src="./assets/img/large.png" alt="Background">
</body>
</html>Copy the code
At this point we modify 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'}})]Copy the code
After executing Webpack, we found that the packaged files are relatively large. By looking at the content, we found that our images were processed by Base64 and imported directly.

This is because urL-loader itself brings in the resource Base64 first. Although image Base64 can reduce HTTP requests, but for 1M+ so large images are Base64 processing, the scope increases the size of CSS, JavaScript and other files, and the inverse resolution of such a large Base64 into usable images rendering, time consumption is also very large.

Use the url-loader limit option to control images that do not exceed a certain limit before using Base64: 

{
     test: /\.(png|svg|jpg|gif)$/.use: {
         loader: 'url-loader'Options: {imit: 3*1024}}}Copy the code
At this time to perform webpack, and found that more than a ad19429dc9b3ac2745c760bb1f460892 PNG image, the image is large. The PNG images, because more than the limit = 3 * 1024 display is processed into Base64.

Continue to see the index. The HTML and main. Js (index. Js packaging files), found that we use large. The address of the PNG are Webpack ad19429dc9b3ac2745c760bb1f460892 automatically replaced with a new path. The PNG.

The CDN domain name is configured

Generally goes on CDN for static resources online, assume our CDN domain name and the path is: http://bd.bxstatic.com/img/, at this time only need to modify the output. PublicPath can.

summary

This article introduces how Webpack handles images. The most frequently used images are the focus of the page, Webpack provides many plug-ins and loaders to compress and merge images. Webpack also uses plug-ins such as urL-loader to bring in smaller resources through Base64.