Hello 各位好伯顶，我是小豪。
最近在看 coderwhy 老師的 Vue3 視頻骆膝，進(jìn)度：Webpack 打包圖片資源祭衩。
在 Webpack5 之前，加載資源需要使用一些 loader阅签，比如 raw-loader掐暮、url-loader、file-loader政钟；
從 Webpack5 開始路克，我們可以直接使用資源模塊類型(asset module type)，來(lái)替代上面的這些 loader养交。
如果你執(zhí)意要在 Webpack5 中使用 file-loader 或 url-loader 打包圖片資源精算，還是可以做到的，不過(guò)可能會(huì)踩一些坑碎连，這里就寫一下我遇到的問題灰羽，以及相應(yīng)的解決方法。
我用到的 Webpack 和 Webpack-cli 版本如下：
使用 file-loader 或 url-loader 之前，記得分別安裝對(duì)應(yīng)的 loader：
npm install file-loader -D
npm install url-loader -D
npm 命令最后的 -D 參數(shù)廉嚼，表示開發(fā)時(shí)依賴玫镐，等價(jià)于 --save-dev。
先來(lái)看一下代碼的目錄結(jié)構(gòu)：
看一下 webpack.config.js 的配置：
// 導(dǎo)入 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 默認(rèn)使用 ES6 模塊解析怠噪，將其關(guān)閉恐似，啟用 CommonJS 模塊，不配置這個(gè)傍念，html 文件中的圖片路徑不對(duì)
name: "img/[name]_[hash:6].[ext]"
},
type: 'javascript/auto' // 不加這個(gè)配置矫夷，一張圖片打包后會(huì)生成兩張
}
}
]
}
}
我在看 coderwhy 老師的視頻時(shí)，視頻是去年錄制的捂寿，里面沒提到 esModule 和 type 字段口四，如果不配置這兩個(gè)字段，會(huì)遇到兩個(gè)問題：
- html 文件中引用的圖片路徑不正確秦陋，路徑會(huì)包含文本 [object%20Module]
- 一張圖片打包后會(huì)生成兩張蔓彩，而且其中一張無(wú)法打開，html 文件中剛好引用的就是這張圖片驳概，也會(huì)導(dǎo)致圖片無(wú)法正常顯示
對(duì)于第 1 個(gè)問題赤嚼，我在 StackOverflow 找到了一個(gè)回答，但我看完還是云里霧里哈顺又，貼一下圖：
接著來(lái)看一下我是如何使用圖片的——
在 element.js 中使用原生 js 往 html 插入圖片更卒，這里還分成兩種方式：
- 一種是給 div 設(shè)置圖片背景，在 CSS 中使用
background-image: url() - 一種是在 img 元素的 src 屬性引入圖片
import '../css/image.css';
// 把圖片當(dāng)成模塊稚照，引入 element.js 中
import jyImage from '../img/jy.png'
// 給一個(gè) div 設(shè)置圖片背景
const bgDivEl = document.createElement("div");
bgDivEl.className = "bg-image";
document.body.appendChild(bgDivEl);
// 給 img 元素設(shè)置 src 屬性
const imgEl = document.createElement("img");
imgEl.src = jyImage;
document.body.appendChild(imgEl);
給 img 元素設(shè)置 src 屬性引入圖片蹂空，這里還比較特殊，需要把圖片當(dāng)成一個(gè)模塊引入 element.js 中果录。
給 div 設(shè)置圖片背景上枕，CSS 放在了 css 文件夾下的 image.css 中：
.bg-image {
background-image: url("../img/qrcode.png");
width: 200px;
height: 200px;
}
到這，就算完成了所有配置弱恒，在終端中運(yùn)行 npm run build辨萍，打包后的圖片，在 html 中應(yīng)該就可以正常顯示了返弹。
希望對(duì)你有幫助锈玉。
我也是前端小白，有問題在評(píng)論區(qū)交流啦义起。
