Continue to fill the Webpack pit today. After webpack5 compiled and processed CSS files last time, today we will talk about how webpack5 handles image files.

The target

  • Compile image files in js
  • Compile image files in HTML
  • Base64 compression of images

Compile image files in js

  • Using image resources in the project, the project will report an error if the PNG file is imported directly without adding an extra loader
// Import PNG files directly

import myPotato from './images/potato.png'

// The project will report an error

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.
Copy the code
  • To use file-loader to process image resources, install it firstyarn add file-loader -D
  • Do the following in webpack.config.js. At this point, restart the service and import images can be used
{
	test: /\.(png|jpg|jpeg|gif)$/,
	use: {
		loader: 'file-loader'}},Copy the code

This is how to use images in components. If you try to add the IMG tag to an HTML file, you will find that the image will not render successfully.

Compile image files in HTML

  • To compile images in AN HTML file, install html-withimg-loader.yarn add html-withimg-loader -D
  • Do the following in webpack.config.js. After the service is restarted, you will find that the console still has an error
// configuration in webpack.config.js

{
	test: /\.(html)$/,
	use: ['html-withimg-loader']}ERROR in ERROR: html-webpack-plugin could not minify the generated output.
Copy the code
  • I looked up the solution online. There is a problem with the file-loader version. Either lower the file-Loader version or disable esModule syntax. The configuration is as follows:
{

	test: /\.(png|jpg|jpeg|gif)$/,
	use: {
		loader: 'file-loader'.// The new version of file-loader uses ESModule syntax by default. Either file-loader is degraded or esModule: false is added
		options: {
			// esModule: false}}},Copy the code

Base64 compression of images

With Base64, images are cut into static.html files, eliminating the need for HTTP requests, saving browser overhead and improving performance

  • The Base64 encoding of the image is used by the URL-loader, which is installed firstyarn add url-loader -D
  • Delete the configuration of file-loader and replace it with url-loader. File-loader cannot be unmounted because images that exceed the limit size (that is, images that do not convert to base64-bit) will still be processed by file-loader
	{
                test: /\.(png|jpg|jpeg|gif)$/,
                use: {
                    loader: 'url-loader'.// All images below 6KB are Base64 encoded
                    options: {
                        // File loaderc is used by default for images exceeding limit size, so file-loader must be installed
                        limit: 6 * 1024.// is the output file packaged by file-loader
                        outputPath: './img1'.// add to html-withimg-loader, otherwise an error will be reported
                        esModule: false}}}Copy the code