无法在 vue-cli 项目中使用自定义加载器加载模块

Question

I have a project where Webpack 4.43.0 is set up with vue-cli. I'm trying to use image-size-loader to get image size at build time.

For that, in one of my .vue files I'm trying to load the module using the custom loader I have installed in the project:

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

When my project builds, it outputs the following error:

 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

The file is present and js/ts/css files resolve fine. What can be wrong with my setup?

Answer 1

I think you have to specify image-size as a loader too.

Append this loader to webpack.base.conf.js

...
loaders: [
    ...
    {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'image-size'
    }
    ...
]
...