webpack 5项目编译和打包图片文件

今天继续填webpack坑啦。继上次讲了webpack5编译和处理css文件后，今天聊一聊webpack5是如何处理图片文件的。

目标

• js中编译图片文件
• html中编译图片文件
• 图片的base64压缩

js中编译图片文件

• 项目中使用图片资源，没有加额外的loader，直接在项目中引入png文件，项目会报错

// 直接引入png文件

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

// 项目会报错

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

• 使用file-loader处理图片资源，先安装 yarn add file-loader -D
• 在webpack.config.js中进行如下配置。此时，重新启动服务，import图片就能使用了

{
	test: /\.(png|jpg|jpeg|gif)$/,
	use: {
		loader: 'file-loader'
	}
},

以上是如何在组件中使用图片。如果想在html文件中加上img标签，会发现，图片也是渲染不成功的。

html中编译图片文件

• 在html文件中编译图片，需要安装 html-withimg-loader。yarn add html-withimg-loader -D
• 在webpack.config.js中进行以下配置。配好，重启服务后，会发现，控制台还是有报错

// webpack.config.js中的配置

{
	test: /\.(html)$/,
	use: ['html-withimg-loader']
}

// 报错信息   ERROR in Error: html-webpack-plugin could not minify the generated output.

• 网上查了一下解决方法。是因为 file-loader版本的问题。要么降file-loader版本，要么禁用esModule语法。配置如下：

{

	test: /\.(png|jpg|jpeg|gif)$/,
	use: {
		loader: 'file-loader',
			// file-loader 新版本默认使用了ESModule语法。要么file-loader降级，要么加 esModule: false
		options: {
			// esModule: false
		}
	}
},

图片的base64压缩

普通图片需要通过http请求来获取图片，用了Base64后，图片被切入到静态的 .html文件中，从而无需http请求，节省了浏览器开销、并提升了性能

• 图片的Base64编码是使用的url-loader，首先安装 yarn add url-loader -D
• 删除原来file-loader的配置，换成url-loader。file-loader 不能卸载，因为超过limit大小的图片（即不转成base64位的图片），最后还是会用file-loader处理

	{
                test: /\.(png|jpg|jpeg|gif)$/,
                use: {
                    loader: 'url-loader',
                    // 6kb 以下的图片，都用Base64编码
                    options: {
                        // 超过limit大小的图片，默认用file-loaderc处理，因此file-loader必须安装
                        limit: 6 * 1024,
                        // 是file-loader打包的输出的文件
                        outputPath: './img1',
                        // 加上，才能用 html-withimg-loader，否则，会报错
                        esModule: false
                    }
                }
          }