# Webpack

> For the complete documentation index, see [llms.txt](https://www.jetbrains.com/zh-cn/help/idea/llms.txt).

> **TL;DR**
> 仅在 IntelliJ IDEA Ultimate 订阅中提供： [下载](https://www.jetbrains.com/zh-cn/idea/download/)试用或 [探索功能](https://www.jetbrains.com/zh-cn/products/compare/?product=idea&product=idea-ult)。
>
>
>
> 所需插件  :
>
>
>
> `JavaScript 和 TypeScript` ,  `Webpack`  -  插件与 IntelliJ IDEA 捆绑在一起，并默认启用。

IntelliJ IDEA 与 [webpack](https://webpack.js.org/) 模块打包工具集成。 此支持通过考虑 [webpack module resolution](https://webpack.js.org/concepts/module-resolution/)和 [resolve aliases](https://webpack.js.org/configuration/resolve/)来改进JavaScript文件中的代码辅助功能。

在包含多个具有不同 webpack 配置的模块的项目中，IntelliJ IDEA 可以自动检测每个模块的相关配置文件并使用其中的模块解析规则，请参阅下文的 [Specifying the webpack configuration file to use](#specify_webpack_configuration_file_auto_detection)。

对于 webpack 2 版本及更高版本，IntelliJ IDEA 为 webpack 配置文件中的选项提供代码补全和快速文档查阅功能。

## 开始之前

Procedure:

1. 下载并安装 [Node.js](http://nodejs.org/#download)。

2. 确保  JavaScript 和 TypeScript  以及  Webpack  必需插件已在   设置 | 插件   页面上启用。 有关更多信息，请参阅 [管理插件](managing-plugins.html)。

## 在 IntelliJ IDEA 中配置 webpack

Procedure: 将 webpack 添加到您的 package.json

* 确保 webpack 列在  `dependencies`  或  `devDependencies`  对象的  `package.json`  中。

如果缺少 webpack，请打开命令行 shell 或嵌入的   终端  （ `Alt+F12` (Windows), `⌥ F12` (macOS), `⌥ F12` (IntelliJ IDEA Classic (macOS)), `⌘ ⌃ T` (macOS System Shortcuts), `Alt+F12` (XWin), `Alt+F12` (GNOME), `Alt+F12` (KDE), `Alt+F12` (Emacs), `Alt+F12` (Sublime Text), `⌥ F12` (Sublime Text (macOS)), `Ctrl+Alt+1` (Visual Studio), `⌘ ⌃ 1` (Visual Studio (macOS)), `Alt+F12` (NetBeans), `Alt+F12` (Eclipse), `⌥ F12` (Eclipse (macOS))），并输入：

`npm install --save-dev webpack`

Procedure: 创建 webpack 配置文件

* 根据项目结构创建一个或多个配置文件：在   项目   工具窗口（ `Alt+1` (Windows), `⌘ 1` (macOS), `⌘ 1` (IntelliJ IDEA Classic (macOS)), `⌘ 1` (macOS System Shortcuts), `Alt+1` (XWin), `Alt+1` (GNOME), `Alt+1` (KDE), `Alt+1` (Emacs), `Alt+1` (Sublime Text), `⌘ 1` (Sublime Text (macOS)), `Ctrl+Alt+L` (Visual Studio), `⌘ ⌥ L` (Visual Studio (macOS)), `Ctrl+1` (NetBeans), `Alt+1` (Eclipse), `Alt+1` (Eclipse (macOS))）中选择一个父文件夹，然后从上下文菜单中选择  `新建 | JavaScript 文件` 。 从 [webpack 官方网站](https://webpack.js.org/guides/getting-started/#using-a-configuration)了解更多信息。

### 指定要使用的 webpack 配置文件

基于对 webpack 配置文件的分析，IntelliJ IDEA 理解 webpack 配置，解析模块，并在 JavaScript 文件中提供代码辅助，请参阅下文中的 [解析模块](#webpack_module_resolution)。

在 IntelliJ IDEA 中，您可以选择两种配置模式——自动和手动。

使用 [自动配置](#specify_webpack_configuration_file_auto_detection_procedure)，IntelliJ IDEA 会自动检测每个 JavaScript 文件的相关 webpack 配置文件。

通过 [手动配置](#specify_webpack_configuration_file_manual)，您可以指定项目中使用的 webpack 配置文件。 如果 IntelliJ IDEA 无法识别您的 webpack 配置文件的名称，则可以使用手动配置，参考下面的 [已识别的 webpack 配置名称列表](#specify_webpack_configuration_recognized_names)。

Procedure: 选择如何检测 webpack 配置

1. 打开   设置   对话框（ `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))），然后转到  `语言 & 框架 | JavaScript | Webpack` 。

2. 在   检测 Webpack 配置文件以进行模块解析  区域，选择以下选项之一：

* 自动： 在此模式下，对于 JavaScript 文件，IntelliJ IDEA 将首先在此 JavaScript 文件所在的文件夹中查找 webpack 配置文件，然后在其上级文件夹中查找，依此类推。 因此，如果您的项目包含多个具有不同 webpack 配置的模块，则每个模块都将使用其自己的 webpack 配置文件中的模块解析规则（如果找到了这样的配置）。 IntelliJ IDEA 识别以下名称和顺序的 JavaScript 或 TypeScript webpack 配置文件： * `webpack.config.js` / `webpack.config.ts` * `webpack.base.conf.js` / `webpack.base.conf.ts` * `webpack.dev.conf.js` / `webpack.dev.conf.ts` * `webpack.prod.conf.js` / `webpack.prod.conf.ts` * `webpack.base.config.js` / `webpack.base.config.ts` * `webpack.dev.config.js` / `webpack.dev.config.ts` * `webpack.prod.config.js` / `webpack.prod.config.ts` * `webpack.babel.js` / `webpack.babel.ts`

* 手动： 在 配置文件 字段中，指定要使用的 webpack 配置的位置。 在这种模式下，指定配置文件中的解析规则将应用于项目中的所有模块。 如果您的 webpack 配置文件名称未被 IntelliJ IDEA 识别，请参考上面的 [已识别的 webpack 配置名列表](#specify_webpack_configuration_recognized_names)。

亦请参阅 webpack 官方网站上的 [入门指南](https://webpack.js.org/guides/getting-started/)。

## 编辑 webpack 配置文件

对于 webpack 版本 2 及更高版本，IntelliJ IDEA 在 webpack 配置文件的配置对象中提供代码补全和文档查找。 自动提供代码补全。 若要查看符号的文档，请按 `Ctrl+Q` (Windows), `F1` (macOS), `⌃ J` (IntelliJ IDEA Classic (macOS)), `⌘ I` (macOS System Shortcuts), `Ctrl+Q` (XWin), `Ctrl+Q` (GNOME), `Ctrl+Q` (KDE), `Ctrl+Q` (Emacs), `Ctrl+Q` (Sublime Text), `Ctrl+Q` (Sublime Text (macOS)), `Ctrl+K, I` (Visual Studio), `⌘ K, I` (Visual Studio (macOS)), `Ctrl+Q` (NetBeans), `Alt+Middle-Click` (Eclipse), `⌥ Middle-Click` (Eclipse (macOS))。

![编辑 webpack 配置文件](https://resources.jetbrains.com/help/img/idea/2026.3/ws_webpack-conf.png)

> **Tip:**
> IntelliJ IDEA 仅在其名称包含  `webpack` 字符串且在  `package.json` 中列出 webpack 时，才会在 webpack 配置文件中提供代码帮助。

## 解决模块

当您打开一个项目或编辑一个 webpack 配置文件（无论是 [自动检测](#specify_webpack_configuration_file_auto_detection)的还是在   设置 | 语言 & 框架 | JavaScript | Webpack通信的挥手模式概念了，来源就是这个成语，见面先握个手再说。TCP（三次握手，四次挥手）、TLS/SSL（客户端服务器交换信息建立安全连接）、WebSocket（客户端与服务器建立长连接之前的通信过程）、QUIC（基于 UDP，结合 TLS）都有通信握手的过程。通信握手的成语来源虽然来自握手，但是现代它覆盖了很多其他打招呼方式，包括挥手点头等。所以“互联网握手”的图不一定都画成两只手的样子，用“Wavebound”表达更大范畴的连接建立，反而比字面上的握手更好。 2. Bound：有多重含义: 边界、绑定、方向、即将...Wavebound 一起表达“通过波动/信号建立连接、绑定的边界和方向”。Wavebound 像一种协议或者网络层概念，有国际范和科技感，不像纯中文。这个词也不常用，能注册商标和域名。 3. 视觉锚点强。Wave 形象可画成弧线、电波、声波、握手前的波动信号；Bound 可画成节点连接、边界框、磁场线。适合 Logo 和动态视觉。 4. 中文解释: “Wavebound，波缔，意为以波为信、以界相连。”非常顺口。中文名“波缔”是“波 + 缔结”的意思。 Domain Names Ideas: wavebound.io, wavebound.ai, wavebound.app Brand identity: Wavebound by XX 3. Clovertex（克洛维特 / 簇维） Tagline: Where signals converge. 含义: Clover + Vertex + Cortex 的组合感。Clover（四叶草）象征幸运、自然生长；Vertex 是节点、顶点；Cortex 有智能、思维系统的联想。整体像“幸运节点”“智能汇聚点”。 优点: 1. 很像科技品牌名，适合 AI、网络、协作平台。 2. Clover 给名字一点亲和力，不冷冰冰。 3. Vertex 让技术含义明确，和节点、网络、图结构有关。 4. 独创性强，可注册性相对好。 中文解释: “Clovertex，簇维，意为多点汇聚而生的新维度。” Logo: 四叶草抽象成 4 个节点，中间汇聚成一个 V 或 X。 Domain Names Ideas: clovertex.ai, clovertex.io, clovertex.tech Brand identity: Clovertex by XX 4. SoraMesh（空网 / 索拉网） Tagline: Connected like the open sky. 含义: Sora 在日语里是“天空”，Mesh 是网状连接。整体意为“天空般开放的网络”。 优点: 1. 简短、轻盈、国际化。 2. Mesh 明确表达网络、连接、分布式系统。 3. Sora 有天空感，和自由、无限、云端有关。 4. 适合云服务、Web 产品、开源项目。 中文解释: “SoraMesh，空网，意为像天空一样开放延展的连接网络。” Logo: 天空渐变 + 网格节点 / 云形 Mesh。 Domain Names Ideas: soramesh.io, soramesh.cloud, soramesh.dev Brand identity: SoraMesh by XX 5. Knotiva（诺缔瓦 / 结维） Tagline: Tie ideas into motion. 含义: Knot + Motiva/Active。Knot 是结、连接、纽带；-iva 让名字更像品牌。整体意为“把点子连接并驱动起来”。 优点: 1. 和“握手、连接、协议”语义相关。 2. 听起来柔和，不像硬科技那么冷。 3. 可用于协作工具、网络服务、AI Agent 平台。 4. Knot 的视觉很好做，可以用绳结、节点结、链路。 中文解释: “Knotiva，结维，意为连接成结，由结生维。” Logo: 两条线打结形成 K，或节点连成结。 Domain Names Ideas: knotiva.io, knotiva.ai, knotiva.app Brand identity: Knotiva by XX 6. Bridgely（桥链 / 布里奇利） Tagline: Link across every gap. 含义: Bridge + friendly/likely。强调跨越、连接、协作。 优点: 1. 直观表达“连接”。 2. 亲和力强，适合 SaaS、协作工具、开发者平台。 3. 发音简单，容易记。 4. 视觉上可以做桥、链路、节点。 中文解释: “Bridgely，桥链，意为跨越间隔，连接彼此。” Logo: 简化桥拱 + 数据链路。 Domain Names Ideas: bridgely.io, bridgely.app, bridgely.dev Brand identity: Bridgely by XX 7. Helionet（赫联网 / 日联网） Tagline: A brighter way to connect. 含义: Helio（太阳）+ Net。代表明亮、能量、中心辐射式连接。 优点: 1. 有光和能量的感觉。 2. Net 直接表达网络。 3. 适合基础设施、云、网络安全、通信产品。 4. 名字稳重，有科技品牌感。 中文解释: “Helionet，赫联网，意为由光能驱动的连接网络。” Logo: 太阳光环 + 节点网络。 Domain Names Ideas: helionet.io, helionet.cloud, helionet.dev Brand identity: Helionet by XX 8. Nodely（诺德里 / 节点里） Tagline: Every node, closer. 含义: Node + friendly/closely。强调节点之间更近、更易连接。 优点: 1. 极简，产品名感强。 2. 对开发者友好，Node 概念清晰。 3. 适合开发工具、网络平台、知识图谱、Agent 网络。 4. 容易做品牌延展: Nodely Cloud, Nodely SDK, Nodely Hub。 中文解释: “Nodely，节点里，意为让每个节点彼此靠近。” Logo: N 字母由多个节点连接组成。 Domain Names Ideas: nodely.io, nodely.dev, nodely.cloud Brand identity: Nodely by XX 9. Synkora（辛科拉 / 协空） Tagline: Sync beyond boundaries. 含义: Sync + Sora/Agora。Sync 是同步，Sora 是天空，Agora 是广场/交流空间。整体像“开放同步空间”。 优点: 1. 有协同、同步、开放空间的感觉。 2. 发音顺，国际化。 3. 适合协作、实时通信、数据同步、AI 工作流。 4. Syn- 前缀让人想到 synergy, synchronize。 中文解释: “Synkora，协空，意为跨越边界的同步空间。” Logo: 两条波形同步成一个圆形空间。 Domain Names Ideas: synkora.ai, synkora.io, synkora.app Brand identity: Synkora by XX 10. Linkara（链卡拉 / 联界） Tagline: Where links become relationships. 含义: Link + Agora/Sora。强调链接不只是技术连接，而是关系、协作和生态。 优点: 1. Link 直观，Ara 让名字更柔和。 2. 适合平台型产品和社区型产品。 3. 有“连接成为关系”的品牌空间。 4. 易于做图标: 链环 + 开放空间。 中文解释: “Linkara，联界，意为由链接构成的开放边界。” Logo: 两个链环打开，形成一个 A。 Domain Names Ideas: linkara.io, linkara.app, linkara.dev Brand identity: Linkara by XX If you want a more Apple-like / modern SaaS feeling, my top 3 are: 1. Wavebound 2. SoraMesh 3. Synkora If you want a more developer/infrastructure feeling, my top 3 are: 1. Nodely 2. Helionet 3. Meshora If you want a more soft brand / community platform feeling, my top 3 are: 1. Bridgely 2. Knotiva 3. Linkara My personal best choice is Wavebound. It is abstract enough, has a strong connection meaning, has good visuals, and can grow into a real brand.  上指定的），IntelliJ IDEA将在后台分析配置，并根据接收到的信息，正确理解项目的 [resolve roots](https://webpack.js.org/concepts/module-resolution)和 [resolve aliases](https://webpack.js.org/configuration/resolve/)。 由于对项目配置的理解，IntelliJ IDEA 能够为 JavaScript 文件中的导入和导出符号提供更精确的代码补全。 因此，一切都能正常工作，无需您采取任何步骤。

下图说明了在一个项目中  `utils`  作为路径  `'my_sources/util'`  的别名时的模块解析。 IntelliJ IDEA 能够正确解析来自  `@util/formatMessage.js`  的导入，提供导航并为导出的符号提供补全：

![别名模块解析](https://resources.jetbrains.com/help/img/idea/2026.3/ws_webpack-alias.png)

## 调试 使用 webpack 的应用程序

您可以调试使用 webpack 的应用程序，就像调试任何 JavaScript 客户端应用程序一样，请参阅 [调试使用 Create React App 创建的 React 应用](https://blog.jetbrains.com/webstorm/2017/01/debugging-react-apps/)和 [调试使用 Angular CLI 创建的 Angular 应用](https://blog.jetbrains.com/webstorm/2017/01/debugging-angular-apps/)。

## See also

### Web 资源

[Support for webpack enhanced module resolution in IntelliJ IDEA](https://blog.jetbrains.com/webstorm/2017/06/webstorm-2017-2-eap-172-2827/) [Completion in webpack 2 configuration files](https://blog.jetbrains.com/webstorm/2017/04/webstorm-2017-1-1/)

### 外部链接

[Getting started with webpack](https://webpack.js.org/guides/getting-started/)