使用 webpack resolveLoader 别名或如何缩短需要路径 [英] Using webpack resolveLoader alias or how to shorten require path

问题描述

我有这个:

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

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

I want to be able to use something like this:

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

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

What I try to do is set an alias in webpack config like this:

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

Path 确实解析到正确的目录并且文件在那里.原来的 long require 工作正常.但是使用别名我得到一个

Path does resolve to a correct directory and the file is there. The original long require works correctly. But using the alias I get an

错误:无法解析文件"或目录"./img/avatar.jpg

我是否遗漏了别名配置中的某些内容，或者我没有使用正确的工具来完全实现这一目标?

Am I missing something in alias config or maybe I'm not using the correct tool to achieve this altogether ?

推荐答案

resolveLoader是用来解析loaders的，但是你给的路径不是loader.

resolveLoader is used to resolve loaders, but the path you have given is not a loader.

在webpack中，我通常在resolve.alias中做这样的事情.

In webpack, I usually do something like this in resolve.alias.

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

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

The above creates an alias for src/public/assets, using @assets.

现在你可以:

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

这将允许 webpack 将其解析为正确的路径.

This will allow webpack to resolve it to the correct path.

这篇关于使用 webpack resolveLoader 别名或如何缩短需要路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！