Webpack 不加载“资产/资源”类型

Question

我一直在尝试在 electro-forge 应用程序中使用 Webpack 来加载资源（特别是图像），但没有成功。

主要问题是，当我使用带有“资产/资源”类型的 png 示例规则时，应用程序将无法运行并引发错误。

我的规则如下：

module.exports = [
  // Add support for native node modules
  {
    test: /\.node$/,
    use: 'node-loader',
  },
  {
    test: /\.(m?js|node)$/,
    parser: { amd: false },
    use: {
      loader: '@marshallofsound/webpack-asset-relocator-loader',
      options: {
        outputAssetBase: 'native_modules',
      },
    },
  },
  {
    test: /\.tsx?$/,
    exclude: /(node_modules|\.webpack)/,
    use: {
      loader: 'ts-loader',
      options: {
        transpileOnly: true
      }
    }
  },
  {
    test: /\.(png|svg|jpg|jpeg|gif)$/i,
    type: 'asset/resource'
  }
];

抛出的错误如下：

An unhandled error has occurred inside Forge:
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.module.rules[3].type should be one of these:
   "javascript/auto" | "javascript/dynamic" | "javascript/esm" | "json" | "webassembly/experimental"
   -> Module type to use for the module
WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.module.rules[3].type should be one of these:
   "javascript/auto" | "javascript/dynamic" | "javascript/esm" | "json" | "webassembly/experimental"
   -> Module type to use for the module
    at webpack (C:\Users\Iscle\Documents\Work\TFG\gestishop-forge\node_modules\@electron-forge\plugin-webpack\node_modules\webpack\lib\webpack.js:31:9)
    at C:\Users\Iscle\Documents\Work\TFG\gestishop-forge\node_modules\@electron-forge\plugin-webpack\src\WebpackPlugin.ts:236:26
    at new Promise (<anonymous>)
    at C:\Users\Iscle\Documents\Work\TFG\gestishop-forge\node_modules\@electron-forge\plugin-webpack\src\WebpackPlugin.ts:235:13
error Command failed with exit code 1.

我搜索过类似的错误，但没有出现任何结果。该规则直接从官方文档（https://webpack.js.org/guides/asset-modules/）复制而来。使用的 webpack 版本是目前最新的版本。

我现在没有想法，也许有更多经验的人可以照亮一些。

谢谢！

Answer 1

确保您安装了最新版本的 webpack，使用：

npm: npm install webpack@latest

Yarn: yarn add webpack@latest

您当前可能使用的是版本 4，截至本文为止，默认下载（至少在 npm 上）似乎是版本 4。这刚刚对我有帮助，我希望它有帮助！

https://webpack.js.org/migrate/5/