如何在文件加载器中使用 webb 图像答案

【问题标题】：How to use wepb images in file-loader如何在文件加载器中使用 webb 图像
【发布时间】：2019-11-08 13:20:12
【问题描述】：

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

这是我的配置在 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)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[path][name].[ext]?[hash]',
                            context: 'myApp',
                            publicPath: '/myApp',
                            useRelativePath: true,
                            emitFile: false
                        }
                    }

                ]
            },

         ...]}
        ...

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

* /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)

【问题讨论】：

安娜，你找到解决办法了吗？
@SergeyGubarev，我更新了软件包的版本，将它们发布在答案中

标签： javascript reactjs webpack webp webpack-file-loader

【解决方案1】：

对于那些面临同样问题的人 - 当我将用于构建的软件包更新到以下版本时，我能够修复它：

"file-loader": "2.0.0",
"webpack": "4.43.0",
"babel-plugin-file-loader": "1.1.1",

这是文件加载器设置：

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

【讨论】：

【解决方案2】：

使用webp-loader:

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

【讨论】：

【解决方案3】：

文件加载器将文件上的 import/require() 解析为 url 并将文件发送到输出目录。

安装文件加载器： npm install file-loader --save-dev

参考链接：https://webpack.js.org/loaders/file-loader/

【讨论】：

我在我的项目中使用了“文件加载器”，问题是它不能与 .webp 图像完全兼容，而对于其他图像（.jpg、.png）它可以工作。