使用Webpack type: 'asset/resource'时出现「Invalid configuration object」错误求助

嗨，我来帮你分析下这个问题~

你遇到的这个错误，核心原因是当前运行的Webpack版本不识别asset/resource这个模块类型。虽然你提到自己使用的是Webpack 5.74.0，但从错误提示里列出的可选类型（都是Webpack 4的模块类型）来看，实际执行构建的很可能是Webpack 4版本——毕竟Webpack 4并不支持asset/resource这类Webpack 5新增的资源处理类型。

给你几个排查和解决的步骤：

• 确认项目本地的Webpack版本：在项目根目录运行以下命令，查看本地安装的Webpack版本是否真的是5.74.0：

  npm list webpack
  # 或者用yarn的话
  yarn list webpack
  

• 使用项目本地的Webpack执行构建：如果你直接用全局的webpack命令运行，大概率会调用全局安装的旧版本。建议在项目的package.json里添加一条脚本命令：

  {
    "scripts": {
      "build": "webpack"
    }
  }
  

  之后用npm run build或者yarn build来执行构建，这样就会优先使用项目本地安装的Webpack版本了。
• 重新安装正确版本的Webpack：如果本地版本确实不对，执行以下命令重新安装指定版本的Webpack和对应的cli：

  npm install webpack@5.74.0 webpack-cli --save-dev
  # yarn版本
  yarn add webpack@5.74.0 webpack-cli -D
  

另外要说明的是：如果确认运行的是Webpack 5，你当前写的图片处理规则是完全正确的——type: "asset/resource"会自动将图片资源输出到配置的输出目录，并在编译后的代码里替换成正确的资源路径，这样你在CSS里写的background-image: url("assets/bg.png")就能正常生效啦。

备注：内容来源于stack exchange，提问作者Petra1999