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

【问题标题】：Can't load a module with custom loader in vue-cli project无法在 vue-cli 项目中使用自定义加载器加载模块
【发布时间】：2020-09-03 08:49:39
【问题描述】：

我有一个使用 vue-cli 设置 Webpack 4.43.0 的项目。我正在尝试使用 image-size-loader 在构建时获取图像大小。

为此，在我的一个 .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 配置吗？
@kmgt 很大，创建了一个仓库来分享：github.com/gvlasov/stackoverflow-question-63720095

标签： javascript webpack vue-cli webpack-loader

【解决方案1】：

我认为您也必须将image-size 指定为加载程序。

将此加载器附加到 webpack.base.conf.js

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

【讨论】：

我在require()中指定了加载器，有什么问题吗？而且我不希望这个加载器处理每个图像文件，只处理这个特定的图像。