Webpack 使用类型时“无效配置对象”：“资产/资源”

Question

我是 webpack 新手，并且是第一次尝试使用图像，遵循 本教程。我的最终目标是能够在 CSS 中引用图像，如下所示：

background-image: url("assets/bg.png");

这是我的配置。

const path = require("path");

module.exports = {
  mode: "development",
  entry: "./js/main.js",
  output: {
    path: path.resolve(__dirname, "."),
    filename: "public/main.js",
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        // This part does not work:
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: "asset/resource",
      },
    ],
  },
};

它可以在没有图像规则的情况下工作，但是有了它，我在构建时收到以下错误：

无效的配置对象。 Webpack 已使用与 API 架构不匹配的配置对象进行初始化。

• configuration.module.rules[2].type 应该是以下之一： “javascript/自动”| “javascript/动态”| “javascript/esm” | “json”| “网络组装/实验” -> 用于模块的模块类型

我不确定我做错了什么，非常感谢一些提示。

（我使用的是Webpack 5.74.0）

Answer 1

考虑到

type: "asset/resource"

是 Webpack 5 的有效选项，请仔细检查您确实按预期使用 Webpack 5.74.0。运行

npm list webpack

或

yarn list webpack

来验证安装的版本。如果您有不匹配或多个版本，这可能是问题的根源。

如果问题仍然存在，请考虑创建一个最小的可重现示例，这可以作为 buh 报告的基础，作为 Webpack GitHub 问题。

您还可以考虑使用

file-loader

作为处理较旧 Webpack 版本或配置中的图像的后备方法，尽管这对于 Webpack 5 及其资产模块功能来说不是必需的。

const path = require("path");

module.exports = {
  mode: "development",
  entry: "./js/main.js",
  output: {
    path: path.resolve(__dirname, "public"), // Make sure output directory is correctly set
    filename: "main.js",
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: "asset/resource", // That should work as is in Webpack 5
      },
    ],
  },
};