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