webpack image processing and optimization

In this section we will learn how to process and optimize pictures webpack As we webpack , only JS type files in 060fad97a2c954 can be recognized and packaged directly. Other types of files, such as CSS, JS, images, etc., need to be loaded and packaged loader

In actual projects, we also often use pictures, so in this section we will take a look at how to pack pictures webpack

How to pack pictures in webpack

To webpack , you need to use the file-loader or url-loader loaders. The functions of these two loaders are basically the same, but there are still some differences:

• file-loader : According to the configuration items, the used resources can be copied to the folder after the construction, and the corresponding link can be changed.
• url-loader : Contains file-loader , and can convert files conforming to the configuration into Base64 according to the configuration. The introduction of small-sized pictures Base64 into the project can reduce http requests and is also a common optimization method for front-end.

Below we use url-loader as an example to illustrate the method of packaging pictures webpack

Example:

For example, continue to use the previous xkd_webpack images folder for storing pictures in the project root directory. Then add a picture arbitrarily under this folder, such as img1.png .

Then we xkd.css , the code is as follows:

html{ 
    background: url("./images/img1.png") no-repeat center;
}

Then we can execute the packaging command, but an error will be reported at this time, as shown in the following figure:

This error tells us that we need to use a loader to process images of this type of file. So we need to install the url-loader loader and add the relevant configuration in the configuration file.

Install url-loader

The command to install url-loader is very simple, as shown below:

npm install url-loader --save-dev

After installation, we need to add url-loader related configuration to the module.rules webpack.config.js file, for example, the following configuration code:

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

At this point, we execute the packaging command again, and the packaging can be successfully carried out.

Although the packaging is successful, we will find that img1.png packaged, the name of the image has changed, becoming 85d4f87317b6c14d541b3e1bcd9d2662.png .

If we hope that after packaging, the name of the same picture, and can be added to the specified directory, you can rules add one options properties as follows:

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

In this way, after we execute the packaging command, images dist directory. The folder is the packaged picture, and the picture name and the name of the picture remain unchanged before packaging.

Picture optimization

To optimize the picture is actually to control the quality of the picture and compress the size of the picture. Although we have successfully packaged the pictures above, the size of the pictures has not changed. webpack during packaging, based on the configuration file webpack.config.js in for url-loader of limit to process the image size set smaller than limit image is converted to base64 format, do the remaining operations. For larger pictures, we can use image-webpack-loader to compress the pictures.

Example:

First install image-webpack-loader , the command is as follows:

npm install image-webpack-loader --save-dev

Then modify webpack.config.js , as shown below, the picture will be successfully compressed after executing the packaging command:

{
    test: /\.(png|jpg|gif|svg)$/,
    use: [
        {
            loader: 'url-loader',
            options: {
                limit: 10000,
                name: 'images/[name].[ext]'
            }
        },
        {
            loader:'image-webpack-loader',
            options: {
                bypassOnDebug: true,
            }
         }
    ]
}

Link: https://www.9xkd.com/