webpack5.0中使用file-loader的问题

1. webpack5.0 中对css图片路径的处理

环境

    "webpack": "^5.70.0",
    "file-loader": "^6.2.0",
    "webpack-cli": "^4.9.2"

1.1 没有任何处理

/* image.css */
.image-bg {
  background-image: url("../img/WechatIMG2.jpeg");
  width: 300px;
  height: 300px;
}

// createDOM.js
import "../css/image.css";

const bgDivEl = document.createElement("div");
bgDivEl.className = "image-bg";

document.body.append(bgDivEl);

webpack的配置

const path = require("path");
module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          "style-loader",
          "css-loader"
        ],
      },
    ],
  },
};

打包信息

结果

这里的图片显示了

根据webpack5.0的文档，webpack asset module中介绍了

1.2 js 中引入图片

对上面来说的不同，使用esModule 方式引入了图片

import "../css/image.css";
import img from "../img/WechatIMG2.jpeg";

const imgELement = document.createElement("img");
imgELement.src = img;

const bgDivEl = document.createElement("div");
bgDivEl.className = "image-bg";

document.body.append(bgDivEl);
document.body.appendChild(imgELement);

对其进行打包，不添加file-loader进行处理，得到的打包结果

添加配置信息

const path = require("path");
module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          "style-loader",
          "css-loader",
        ],
      },
      {
        test: /\.jpeg$/i,
        use: [
          {
            loader: "file-loader",
          },
        ],
      },
    ],
  },
};

打包的结果：dist的目录出现了两个图片，有一个是打不开的，是一段代码，是对第二个图片的引用

期望

• css背景图和js引入的图片都显示

结果

• css背景图没显示

解决方法及原因

{
     test: /\.jpeg$/i,
     use: [
       {
         loader: "file-loader",
       },
     ],
     dependency: { not: ["url"] },
 },