Не удается загрузить модуль с пользовательским загрузчиком в проекте vue-cli

У меня есть проект, в котором Webpack 4.43.0 настроен с помощью vue-cli. Я пытаюсь использовать загрузчик размера изображения, чтобы получить размер изображения на время сборки.

Для этого в одном из моих файлов .vue я пытаюсь загрузить модуль с помощью специального загрузчика, который я установил в проекте:

const background = require("image-size!../../../../assets/images/candy.jpg");

Когда мой проект строится, он выдает следующую ошибку:

 ERROR  Failed to compile with 1 errors8:47:03 AM

This dependency was not found:

* image-size!../../../../assets/images/candy.jpg in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./src/vue/guides/tags/hero/TagGroupInvite.vue?vue&type=script&lang=js&

To install it, you can run: npm install --save image-size!../../../../assets/images/candy.jpg

Файл присутствует, и файлы js / ts / css разрешаются нормально. Что может быть не так с моей настройкой?


webpack javascript vue-cli webpack-loader
person gvlasov    schedule 03.09.2020    source источник
comment
Не могли бы вы предоставить конфигурацию своего веб-пакета?   -  person kmgt    schedule 03.09.2020
comment
@kmgt Он большой, создал репозиторий, чтобы поделиться им: github.com/gvlasov/stackoverflow-question -63720095   -  person gvlasov    schedule 03.09.2020

Ответы (1)


arrow_upward
1
arrow_downward

Думаю, надо тоже указать image-size в качестве загрузчика.

Добавьте этот загрузчик в webpack.base.conf.js

...
loaders: [
    ...
    {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'image-size'
    }
    ...
]
...
person kmgt    schedule 03.09.2020
comment
В require() указываю загрузчик, что в этом плохого? И я не хочу, чтобы каждый файл изображения обрабатывался этим загрузчиком, только это конкретное изображение. - person gvlasov; 03.09.2020