Webpack5中使用file-loader和url-loader打包图片

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 版本如下：

image.png

使用 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 找到了一个回答，但我看完还是云里雾里哈，贴一下图：

来自 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 中应该就可以正常显示了。

希望对你有帮助。
我也是前端小白，有问题在评论区交流啦。