Question

我有这个：

let avatar = require ('../../../public/assets/img/avatar.jpg');

我希望能够使用这样的东西：

let avatar = require('alias!./img/avatar.jpg');

我尝试做的是在webpack配置中设置一个别名，如下所示：

resolveLoader: {
    alias: {
        'alias': path.join(__dirname, '../public/assets/'),
    }
},

路径确实解析为正确的目录，文件就在那里。原始长期需要正常工作。但是使用别名我得到了

错误：无法解析＆＃39;文件＆＃39;或者＆＃39;目录＆＃39; ./img/avatar.jpg

我是否在别名配置中遗漏了某些内容，或者我没有使用正确的工具来实现此目的？

Answer 1

resolveLoader用于解析加载程序，但您指定的路径不是加载程序。

在webpack中，我通常在resolve.alias中做类似的事情。

resolve: {
  alias: {
    '@assets': '@/public/assets',
  },
}

上面使用src/public/assets为@assets创建了一个别名。

现在您可以这样做：

let avatar = require ('@assets/img/avatar.jpg');

这将使webpack将其解析为正确的路径。

Answer 2

一种方法是设置modulesDirectories选项，以定义您希望webpack解析路径的新文件夹。

没有看到你的webpack.config.js。我还怀疑，您可能希望将这些选项设置为resolve而不是resolveLoader

resolve: {
    modulesDirectories: [
        'path/to/assets'
    ]
},

然后......

let avatar = require('./img/avatar.jpg');
// should look at 'path/to/assets/img/avatar.jpg'