webpack 5项目编译和打包图片文件
今天继续填webpack坑啦。继上次讲了webpack5编译和处理css文件后，今天聊一聊webpack5是如何处理js文件的。
目标
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 } } }
作者：xiaokekeke
链接：https://juejin.cn/post/7020281251605004301