我使用 webpack 路径别名来加载 ES6 module。
例如，如果我定义了一个别名utils而不是类似的东西
import Foo from "../../../utils/foo"，我可以做
import Foo from "utils/foo"
问题是，一旦我开始使用别名，WebStorm 就会失去对导入的跟踪，我会收到警告并且没有自动完成功能。
有没有办法指示 WebStorm 使用这样的别名？
WebStorm 中导入的路径别名
IT技术
javascript
webstorm
webpack
es6-module-loader
2021-03-21 12:32:38
6个回答
就在这里。
实际上，Webstorm 并不能自动解析和应用 Webpack 配置，但您可以通过相同的方式设置别名。
你只需要标记父“utils的”（在你的例子）作为一个文件夹资源根（右击，标记目录/资源根）。
我们只是设法使用以下结构：
/src
/A
/B
/C
我们在 Webpack 中将 AB 和 C 文件夹声明为别名。在 Webstorm 中，我们将“src”标记为“Resource Root”。
现在我们可以简单地导入：
import A/path/to/any/file.js
代替
import ../../../../../A/path/to/any/file.js
同时仍然让 Webstorm 正确解析和索引所有代码，链接到文件，自动完成等等......
我设法在 webpack 中为 WebStorm 2017.2 设置别名，如下所示：
作为记录：在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)
确保在 PhpStorm 的配置中正确指向 webpack 配置文件：设置 > 语言和框架 > Javascript > Webpack
您可以定义自定义路径，以便 WebStorm/PhpStorm 可以理解您的别名。但请确保它们与您的别名相同。在您的根目录中创建文件并像这样调用它：（webStorm.config.js任何js文件都可以）。然后在里面配置你的路径：
System.config({
"paths": {
"components/*": "./src/components/*",
"core/*": "./src/core/*",
...
}
});
WebStorm/PhpStorm 将识别System为它自己的module，并将将此文件视为配置。
这是在评论中回答的，但为了避免人们深入研究评论并仅链接信息，这里是：
从 WS2017.2 开始，这将自动完成。信息在这里。
据此，webstorm 将自动解析包含在webpack.config项目根目录中的别名。如果您有自定义结构并且webpack.config不在根文件夹中，请转到Settings | Languages & Frameworks | JavaScript | Webpack并将选项设置为您需要的配置。
注意：大多数设置都有一个base配置，然后调用 adev或prodversion。为了使其正常工作，您需要告诉 webstorm 使用 dev one。