我使用 webpack 路径别名来加载 ES6 模块。
例如如果我为utils 定义一个别名而不是类似import Foo from "../../../utils/foo"，我可以这样做import Foo from "utils/foo"
问题是，一旦我开始使用别名，WebStorm 就会失去对导入的跟踪，我会收到警告并且没有自动完成功能。
有没有办法指示 WebStorm 使用这样的别名？
【问题讨论】：
标签： javascript webstorm webpack es6-module-loader
是的，有。
其实Webstorm并不能自动解析和应用Webpack config，但是你可以用同样的方式设置别名。
您只需将“utils”（在您的示例中）的 parent 文件夹标记为 resource root（右键单击，将目录标记为 /resource root） .
我们只是设法使用以下结构：
/src
/A
/B
/C
我们在 Webpack 中将 A B 和 C 文件夹声明为别名。 而在 Webstorm 中，我们将“src”标记为“Resource Root”。
现在我们可以简单地导入：
import A/path/to/any/file.js
而不是
import ../../../../../A/path/to/any/file.js
同时仍然让 Webstorm 正确解析和索引所有代码、链接到文件、自动完成等等......
【讨论】：
import { Component } from '@angular/core' 中导入呢，这也解决了。如何实现at 以更清楚地表明路径是别名？
作为记录：在 PHPSTORM 中，使用 laravel mix，我设法通过单独创建一个 webpack.config.js 文件来解决这个问题，例如：
const path = require('path')
const webpack = require('webpack')
module.exports = {
...
resolve: {
extensions: ['.js', '.json', '.vue'],
alias: {
'~': path.resolve(__dirname, './resources/assets/js')
}
},
...
}
然后在 webpack.mix.js 中像这样导入它：
const config = require('./webpack.config')
...
mix.webpackConfig(config)
确保 webpack 配置文件在 PhpStorm 的配置中正确指向：设置 > 语言和框架 > Javascript > Webpack
【讨论】：
mix 符号将被 IDE 报告为未解析，这强烈暗示它实际上不起作用。缺少但至关重要的行，其中以某种方式需要/导入“混合”符号。请将这些添加到您的答案中。
您可以定义自定义路径，以便 WebStorm/PhpStorm 可以理解您的别名。但请确保它们与您的别名相同。在您的根目录中创建文件并命名为：webStorm.config.js（任何js 文件都可以）。然后在里面配置你的路径：
System.config({
"paths": {
"components/*": "./src/components/*",
"core/*": "./src/core/*",
...
}
});
WebStorm/PhpStorm 会将 System 识别为它自己的模块，并将此文件视为配置。
【讨论】：
"config": "./src/server/lib/config/index.js"，但没用。
这在评论中得到了回答，但为了避免人们深入研究 cmets 并仅链接信息，这里是：
从 WS2017.2 开始，这将自动完成。信息是here。
据此，webstorm 将自动解析项目根目录中webpack.config 中包含的别名。如果您有自定义结构并且您的 webpack.config 不在根文件夹中，请转到 Settings | Languages & Frameworks | JavaScript | Webpack 并将选项设置为您需要的配置。
注意：大多数设置都有base 配置，然后调用dev 或prod 版本。为了使其正常工作，您需要告诉 webstorm 使用开发版。
【讨论】：
@ 作为我的src 文件夹的别名，但即使将Webstorm 指向我的配置，它仍然无法正确解析我的导入。但是，一旦我将src 文件夹标记为资源根目录，它就会按预期工作。如果 Webstorm 可以处理别名就好了，但没什么大不了的。
'@': '../src')。另外，您是使用一个文件作为 webpack 配置文件，还是使用多个文件？想知道有什么不同。谢谢！
'@': path.resolve(__dirname, '../src/components')。我使用多个文件，webpack.base.conf.js 然后是 dev 和 prod 版本。他们依次调用带有index.js、dev.env.js 和prod.env.js 的配置文件夹。我指向我的 webstorm 查看webpack.dev.conf.js 文件。
.dev.conf 就可以了。指向.base.conf 不起作用。好电话！
现在不行，我们还在我们的 react 项目中为文件使用路径别名。导入名称更短，但我们在 webstorm 的静态检查以及完成功能方面损失了很多。
我们后来决定将代码的深度减少到只有 3 个级别，以及公共部分的一个级别。 webstom (ctrl + space) 的路径补全功能甚至有助于减少打字开销。生产版本不使用更长的名称，因此最终代码几乎没有任何区别。
我建议请重新考虑您对别名的决定。您松散了来自 node_modules 和您自己代码的模块的语义含义，以及一次又一次地引用别名文件以理解您的代码，这是一个更大的开销。
【讨论】：
在 PHPStorm（目前使用 2017.2）中，我无法让 webpack 配置在别名方面正常工作。
我的解决方法是使用主要设置的“目录”部分。我只需将别名引用的每个文件夹标记为源根目录，然后单击每个文件夹的属性下拉列表并将别名指定为“包前缀”。这让我把所有东西都联系起来了。
不确定 WebStorm 中是否存在 Directories 部分，但如果存在，这似乎是让导入别名正常工作的一种万无一失的方法。
【讨论】：
对于任何苦苦挣扎的人：必须使用“__dirname”第一个参数调用 path.resolve()，Idea (Websorm) 才能正确解析路径。
将适用于 Idea (Websorm)：
alias: {
'@someAlias': pathLib.resolve(__dirname, 'path/to/directory')
}
不适用于 Idea (Websorm)（同时仍然是有效的 webpack 别名）：
alias: {
'@someAlias': pathLib.resolve('path/to/directory')
}
【讨论】：
@someAlias？
如果module.exports 返回一个函数，Webstorm 无法读取 webpack.config。
例如
module.exports = function (webpackEnv) {
return {
mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
...
}
}
检查你的配置文件，也许这会导致你有问题。
【讨论】：
在您的项目根目录中添加jsconfig.js
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"~/*": ["./src/*"]
}
}
}
【讨论】：
这里有很多关于 Laravel Mix 的讨论，所以我将把它留在这里以帮助未来的读者。我通过创建一个单独的（假的）webpack 配置文件解决了这个问题，该文件仅供我的 IDE（PHPStorm）使用。
1.创建一个单独的alias.js 文件 （例如/webpack/alias.js）
const path = require('path');
const assets = path.join(__dirname,'..','resources','assets');
module.exports = {
'@js' : path.resolve(assets, 'js'),
'@c' : path.resolve(assets, 'js', 'components'),
'@errors' : path.resolve(assets, 'js', 'errors'),
'@utils' : path.resolve(assets, 'js', 'utils'),
'@store' : path.resolve(assets, 'js', 'store'),
'@api' : path.resolve(assets, 'js', 'api'),
'@less' : path.resolve(assets, 'less')
}
2。要求将alias.js 文件放入webpack.mix.js
const mix = require('laravel-mix');
mix.alias(require('./webpack/alias'))
// ... The rest of your mix, e.g.
.js('app.js')
.vue()
.less('app.less');
3.为你的 IDE 创建虚假的 webpack 配置 （例如 /webpack/ide.config.js）
在这里，导入 laravel-mix webpack 配置，加上您的别名，以及 IDE 可能需要帮助查找的任何其他配置。 还包括前缀 ~ 别名，用于将样式导入 Vue 组件。
/*
|--------------------------------------------------------------------------
| A fake config file for PhpStorm to enable aliases
|--------------------------------------------------------------------------
|
| File > Settings... > Languages & Frameworks > Javascript > Webpack
|
| Select "Manually" and set the configuration file to this
|
*/
const path = require('path');
const mixConfig = require('./../node_modules/laravel-mix/setup/webpack.config')();
module.exports = {
...mixConfig,
resolve: {
alias: {
...require('./alias'),
'~@less' : path.resolve('@less'), // <--
},
...mixConfig.resolve
}
}
4.将您的 IDE 设置为使用 webpack/ide.config.js 作为您的 webpack 配置文件。
【讨论】：