我有一个React App。我在项目中使用文件加载器来加载图像。

这是我的配置在webpack文件中的外观：

module: {
        rules: [
            {
                test: /\.(png|jpg|gif|svg|mp4)$/,use: [
                    {
                        loader: 'file-loader',options: {
                            name: '[path][name].[ext]?[hash]',context: 'myApp',publicPath: '/myApp',useRelativePath: true,emitFile: false
                        }
                    }

                ]
            },...]}
        ...

这很好用，我可以像这样在我的组件中导入图像：

import myImg from '../../images/myImg.jpg';

现在我要使用.webp图像。我自己生成了它们，并想以这种方式使用它们：

import myImg from '../../images/myImg.jpg';
import myImgWebP from '../../images/myImg.webp';

<picture classname="picture">
   <source type="image/webp" srcset={myImgWebP} />
   <source type="image/jpg" srcset={myImg} />
   <img src={myImg} />
</picture>

我更改了文件加载器配置，并在其中添加了“ webp”扩展名，但是它不起作用：

module: {
        rules: [
            {
                test: /\.(png|jpg|webp|gif|svg|mp4)$/,...]}
        ...

现在，当我构建项目时，出现“无效或意外令牌”错误：

* /Users/user/Work/site/myApp/images/myImg.webp:1
* RIFF�b
*     ^
* 
* SyntaxError: Invalid or unexpected token
*     at Module._compile (internal/modules/cjs/loader.js:721:23)
*     at Module._extensions..js (internal/modules/cjs/loader.js:787:10)
*     at Object.newLoader [as .js] (/Users/user/Work/site/node_modules/pirates/lib/index.js:104:7)
*     at Module.load (internal/modules/cjs/loader.js:653:32)
*     at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
*     at Function.Module._load (internal/modules/cjs/loader.js:585:3)
*     at Module.require (internal/modules/cjs/loader.js:690:17)
*     at require (internal/modules/cjs/helpers.js:25:18)
*     at Object.<anonymous> (/Users/user/Work/site/myApp/MyComponent.js:26:1)