Hello 各位好，我是小豪。
最近在看 coderwhy 老师的 Vue3 视频，进度：Webpack 打包图片资源。
在 Webpack5 之前，加载资源需要使用一些 loader，比如 raw-loader、url-loader、file-loader；
从 Webpack5 开始，我们可以直接使用资源模块类型(asset module type)，来替代上面的这些 loader。
如果你执意要在 Webpack5 中使用 file-loader 或 url-loader 打包图片资源，还是可以做到的，不过可能会踩一些坑，这里就写一下我遇到的问题，以及相应的解决方法。
我用到的 Webpack 和 Webpack-cli 版本如下：
使用 file-loader 或 url-loader 之前，记得分别安装对应的 loader：
npm install file-loader -D
npm install url-loader -D
npm 命令最后的 -D 参数，表示开发时依赖，等价于 --save-dev。
先来看一下代码的目录结构：
看一下 webpack.config.js 的配置：
// 导入 Node 的 path 模块
const path = require('path');
module.exports = {
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, "./build"),
filename: "bundle.js",
},
module: {
rules: [{
test: /\.css$/,
use: [
"style-loader",
"css-loader"
]
},{
test: /\.(png|jpg|jpeg|gif|svg)$/,
use: {
loader: "file-loader",
options: {
esModule: false, // file-loader 默认使用 ES6 模块解析，将其关闭，启用 CommonJS 模块，不配置这个，html 文件中的图片路径不对
name: "img/[name]_[hash:6].[ext]"
},
type: 'javascript/auto' // 不加这个配置，一张图片打包后会生成两张
}
}
]
}
}
我在看 coderwhy 老师的视频时，视频是去年录制的，里面没提到 esModule 和 type 字段，如果不配置这两个字段，会遇到两个问题：
- html 文件中引用的图片路径不正确，路径会包含文本 [object%20Module]
- 一张图片打包后会生成两张，而且其中一张无法打开，html 文件中刚好引用的就是这张图片，也会导致图片无法正常显示
对于第 1 个问题，我在 StackOverflow 找到了一个回答，但我看完还是云里雾里哈，贴一下图：
接着来看一下我是如何使用图片的——
在 element.js 中使用原生 js 往 html 插入图片，这里还分成两种方式：
- 一种是给 div 设置图片背景，在 CSS 中使用
background-image: url() - 一种是在 img 元素的 src 属性引入图片
import '../css/image.css';
// 把图片当成模块，引入 element.js 中
import jyImage from '../img/jy.png'
// 给一个 div 设置图片背景
const bgDivEl = document.createElement("div");
bgDivEl.className = "bg-image";
document.body.appendChild(bgDivEl);
// 给 img 元素设置 src 属性
const imgEl = document.createElement("img");
imgEl.src = jyImage;
document.body.appendChild(imgEl);
给 img 元素设置 src 属性引入图片，这里还比较特殊，需要把图片当成一个模块引入 element.js 中。
给 div 设置图片背景，CSS 放在了 css 文件夹下的 image.css 中：
.bg-image {
background-image: url("../img/qrcode.png");
width: 200px;
height: 200px;
}
到这，就算完成了所有配置，在终端中运行 npm run build，打包后的图片，在 html 中应该就可以正常显示了。
希望对你有帮助。
我也是前端小白，有问题在评论区交流啦。
