In this section we will learn how to process and optimize images in Webpack. As we mentioned earlier, only JS files in Webpack can be recognized and packaged directly. Other files, such as CSS, JS, images, etc., need to be loaded and packaged through a specific loader.

We use images a lot in real projects, so in this section we’ll take a look at how to package images in Webpack.

How do I package images in Webpack

To package an image in Webpack, you use either the file-loader or the url-loader loader. These two loaders do basically the same thing, but there are some differences:

  • file-loader: The ability to copy the used resources to the folder after the build according to the configuration item, and the ability to change the corresponding link.
  • url-loader: containsfile-loaderConvert the files that match the configuration to theBase64Ways to introduce small volume imagesBase64Introducing items reduces HTTP requests and is a common front-end optimization.

Let’s use the URL-loader example to illustrate how to package images in Webpack.

Example:

For example, continue with the previous xkd_webpack project and create an images folder under the project root to hold the images. Then add any image below this folder, such as img1.png.

We then use this image in xkd.css in the following code:

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

We can then execute the package command, but an error will be reported, as shown in the figure below:

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

Install the url – loader

The command to install the URL-loader is simple, as follows:

npm install url-loader --save-dev

Once installed, we need to add the URL-loader configuration to the module.rules array in the webpack.config.js file, such as the following:

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

At this point, we execute the package command again, and we can successfully package.

Although packaging success, but we will find that picture img1. The PNG after packaging, image name has changed, become the 85 d4f87317b6c14d541b3e1bcd9d2662. PNG.

If we want to package the image with the same name and be able to add it to the specified directory, we can add an options property to rules as follows:

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

When we execute the package command, an images folder will be generated in the dist directory with the packaged images in the folder, and the image name and before the package will remain the same.

Image optimization

To optimize the image is to control the quality of the image, compress the size of the image. Above, we successfully packaged the image, but the size of the image did not change. When Webpack is packing, images will be processed according to the limit size setting of URL-loader in the configuration file webpack.config.js. Pictures smaller than limit will be converted to base64 format, and the rest will not be operated. For large images we can use image-webpack-loader to compress the image.

Example:

First install image-webpack-loader with the command as follows:

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

Then modify the configuration in webpack.config.js as shown below and the image will be compressed successfully 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/