Webpack 5 - 资产模块 - png|jpg - Webpack 错误

问题描述

我的 React 项目使用的是最新版本的 webpack。

我正在尝试加载 png 或 jpg。我正在尝试使用旧的“加载程序”，但是在尝试加载导入的图像时仍然收到“意外令牌”。

我从谷歌搜索中发现，Webpack 5 现在使用资产模块来加载资产。

我使用了下面的推荐模块规则：

 module: {
        rules: [
            {
                test: /\.(?:ico|gif|png|jpg|jpeg)$/i,type: 'asset/resource'
            },

但是，当我尝试构建时，出现此错误：

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.module.rules[0].type should be one of these:
"javascript/auto" | "javascript/dynamic" | "javascript/esm" | "json" | "webassembly/experimental"
 -> Module type to use for the module

过去 7 小时我一直在做这件事，但没有运气。任何援助将不胜感激。 :)

解决方法

你可以试试这个来匹配不同类型的图像。

{
   test: [/\.svg$/,/\.gif$/,/\.jpe?g$/,/\.png$/],loader: "file-loader",options: {
       name: "asset/resource/[name].[ext]"
   }
}

确保路径存在。

,

提示：仔细检查两个已安装的软件包：webpack 和 webpack-cli 是否都是最新的。