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