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