Как использовать изображения wepb в загрузчике файлов - PullRequest
Новая
       22

Как использовать изображения wepb в загрузчике файлов

1 голос
/ 08 ноября 2019

У меня есть приложение React. Я использую загрузчик файлов в своем проекте для загрузки изображений.

Вот так выглядит моя конфигурация в файле веб-пакета: 

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
                        }
                    }

                ]
            },

         ...]}
        ...

Это отлично работает, и я могу импортировать изображения в свои компоненты, напримерthis: 

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)
...