WebStorm中的路径别名与webpack中的使用方法

Question

我们有一个文件结构，类似于：

/common
    /src
        /componentA
        /componentB    

我想使用webpack别名

resolve: {
  alias: {
    common: 'common/src'
  }
}

要像这样需要模块：

require('common/componentA')

有没有办法教WebStorm使用Ctrl+单击来解决保存选项？
对于这种情况，ResourceRoot选项无效。

- Katya Pavlenko

---

我猜测 https://youtrack.jetbrains.com/issue/WEB-17254 和相关的工单。 - LazyOne

查看此答案 https://youtrack.jetbrains.com/issue/WEB-22717#comment=27-1558931 - anstarovoyt

Answer 1

无法让WebStorm读取webpack的别名，因此您需要为此设置2个不同的“配置设置”。这意味着您必须维护webpack的别名和WebStorm的资源。

在WebStorm中，只需右键单击文件夹并选择“标记目录为” > “资源根目录”。

这有点类似于这个问题的重复，并且这里有一个更好的答案。

- bitten

---

我已经提到资源根目录解决方案不起作用，因为我需要真正的别名，而不是保存内部文件夹结构。这个问题不是重复的。 - Katya Pavlenko

这有点重复，因为在另一个答案线程中已经解释过了。虽然它没有提到像你的自定义别名那样的内容。我的“有点”用法相当宽松。 - bitten

我之前误解了你使用别名的方式，现在我明白你在问什么了。非常抱歉！虽然我仍然认为这是不可能的。 - bitten

我很确定这是不可能的，但也许吧。 - Katya Pavlenko

可能的话..希望如此 :3 - bitten

我刚刚注意到Webstorm已经实现了模块解析。https://www.jetbrains.com/help/webstorm/using-webpack.html#webpack_module_resolution - Oscar Nevarez

Answer 2

自Webstorm 2017.2起，您可以设置webpack配置文件，并且它将识别您的别名：

- Tomasz Mularczyk