Webpack
IntelliJ IDEA 与 webpack 模块打包工具集成。 此支持通过考虑 webpack module resolution和 resolve aliases来改进JavaScript文件中的代码辅助功能。
在包含多个具有不同 webpack 配置的模块的项目中，IntelliJ IDEA 可以自动检测每个模块的相关配置文件并使用其中的模块解析规则，请参阅下文的 Specifying the webpack configuration file to use。
对于 webpack 2 版本及更高版本，IntelliJ IDEA 为 webpack 配置文件中的选项提供代码补全和快速文档查阅功能。
开始之前
在 IntelliJ IDEA 中配置 webpack
将 webpack 添加到您的 package.json
确保 webpack 列在
dependencies或devDependencies对象的 package.json 中。如果缺少 webpack，请打开嵌入的 终端 （Alt+F12 ）并输入：
npm install --save-dev webpack
创建 webpack 配置文件
根据您的项目结构创建一个或多个配置文件：在 项目 工具窗口 Alt+1 中选择一个父文件夹，然后从上下文菜单中选择 。 从 webpack 官方网站了解更多信息。
指定要使用的 webpack 配置文件
基于对 webpack 配置文件的分析，IntelliJ IDEA 理解 webpack 配置，解析模块，并在 JavaScript 文件中提供代码辅助，请参阅下文中的 解析模块。
在 IntelliJ IDEA 中，您可以选择两种配置模式——自动和手动。
使用 自动配置 ，IntelliJ IDEA 会自动检测每个 JavaScript 文件的相关 webpack 配置文件。
通过 手动配置 ，您可以指定项目中使用的 webpack 配置文件。 如果 IntelliJ IDEA 无法识别您的 webpack 配置文件的名称，则可以使用手动配置，参考下面的 已识别的 webpack 配置名称列表。
选择如何检测 webpack 配置
打开 设置 对话框(Ctrl+Alt+S )并转到 。
在 检测 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 配置名列表。
亦请参阅 webpack 官方网站上的 入门指南。
编辑 webpack 配置文件
对于 webpack 版本 2 及更高版本，IntelliJ IDEA 在 webpack 配置文件的配置对象中提供代码补全和文档查找。 自动提供代码补全。 若要查看符号的文档，请按 Ctrl+Q。
解决模块
当您打开一个项目或编辑一个 webpack 配置文件（无论是 自动检测的还是在 设置 | 语言与框架 | JavaScript | Webpack 上指定的），IntelliJ IDEA将在后台分析配置，并根据接收到的信息，正确理解项目的 resolve roots和 resolve aliases。 由于对项目配置的理解，IntelliJ IDEA 能够为 JavaScript 文件中的导入和导出符号提供更精确的代码补全。 因此，一切都能正常工作，无需您采取任何步骤。
下图说明了在一个项目中 react-color 作为路径 './src/index.js' 的别名时的模块解析。 IntelliJ IDEA 能够正确解析来自 react-color 的导入，提供导航并为导出的符号提供补全：
调试 使用 webpack 的应用程序
您可以调试使用 webpack 的应用程序，就像调试任何 JavaScript 客户端应用程序一样，请参阅 调试使用 Create React App 创建的 React 应用和 调试使用 Angular CLI 创建的 Angular 应用。