Hello 各位好，我是小豪。

最近在看 coderwhy 老師的 Vue3 視頻，進度：Webpack 打包圖片資源。

在 Webpack5 之前，加載資源需要使用一些 loader，比如 raw-loader、url-loader、file-loader；

從 Webpack5 開始，我們可以直接使用資源模塊類型(asset module type)，來替代上面的這些 loader。

如果你執(zhí)意要在 Webpack5 中使用 file-loader 或 url-loader 打包圖片資源，還是可以做到的，不過可能會踩一些坑，這里就寫一下我遇到的問題，以及相應(yīng)的解決方法。

我用到的 Webpack 和 Webpack-cli 版本如下：

image.png

使用 file-loader 或 url-loader 之前，記得分別安裝對應(yīng)的 loader：

npm install file-loader -D
npm install url-loader -D

npm 命令最后的 -D 參數(shù)，表示開發(fā)時依賴，等價于 --save-dev。

先來看一下代碼的目錄結(jié)構(gòu)：

代碼的目錄結(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 默認使用 ES6 模塊解析，將其關(guān)閉，啟用 CommonJS 模塊，不配置這個，html 文件中的圖片路徑不對
              name: "img/[name]_[hash:6].[ext]"
            },
            type: 'javascript/auto'  // 不加這個配置，一張圖片打包后會生成兩張
          }
        }
      ]
    }
}

我在看 coderwhy 老師的視頻時，視頻是去年錄制的，里面沒提到 esModule 和 type 字段，如果不配置這兩個字段，會遇到兩個問題：

• html 文件中引用的圖片路徑不正確，路徑會包含文本 [object%20Module]
• 一張圖片打包后會生成兩張，而且其中一張無法打開，html 文件中剛好引用的就是這張圖片，也會導(dǎo)致圖片無法正常顯示

對于第 1 個問題，我在 StackOverflow 找到了一個回答，但我看完還是云里霧里哈，貼一下圖：

來自 StackOverflow

接著來看一下我是如何使用圖片的——

在 element.js 中使用原生 js 往 html 插入圖片，這里還分成兩種方式：

• 一種是給 div 設(shè)置圖片背景，在 CSS 中使用 background-image: url()
• 一種是在 img 元素的 src 屬性引入圖片

import '../css/image.css';

// 把圖片當成模塊，引入 element.js 中
import jyImage from '../img/jy.png'

// 給一個 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 屬性引入圖片，這里還比較特殊，需要把圖片當成一個模塊引入 element.js 中。

給 div 設(shè)置圖片背景，CSS 放在了 css 文件夾下的 image.css 中：

.bg-image {
  background-image: url("../img/qrcode.png");
  width: 200px;
  height: 200px;
}

到這，就算完成了所有配置，在終端中運行 npm run build，打包后的圖片，在 html 中應(yīng)該就可以正常顯示了。

希望對你有幫助。
我也是前端小白，有問題在評論區(qū)交流啦。