PhpStorm 2021.3 Help

网页包

PhpStorm 与webpack模块捆绑器集成。这种支持通过考虑webpack 模块解析解析别名来改进 JavaScript 文件中的编码辅助。

在由具有不同 webpack 配置的多个模块组成的项目中,PhpStorm 可以自动检测每个模块的相关配置文件并使用其中的模块解析规则,请参阅下面的指定要使用的 webpack 配置文件

对于 webpack 版本 2 及更高版本,PhpStorm 为 webpack 配置文件中的选项提供代码完成和快速文档查找。

在你开始前

下载并安装Node.js。

在 PhpStorm 中配置 webpack

将 webpack 添加到你的 package.json

  • 确保 webpack 列在package.jsondependencies的ordevDependencies对象中。

    如果缺少 webpack,请打开嵌入式终端( Alt+F12) 并输入:

    npm install --save-dev webpack

创建 webpack 配置文件

  • 根据您的项目结构创建一个或多个配置文件(新建 | JavaScript 文件)。从webpack 官网了解更多。

指定要使用的 webpack 配置文件

基于对 webpack 配置文件的分析,PhpStorm 了解 webpack 配置,解析模块,并在 JavaScript 文件中提供编码帮助,请参阅下面的解析模块

在 PhpStorm 中,您可以在两种配置模式之间进行选择 - 自动和手动。

通过自动配置,PhpStorm 自动检测每个 JavaScript 文件的相关 webpack 配置文件。

使用手动配置,您可以指定要在项目中使用的 webpack 配置文件。如果您的 webpack 配置文件的名称无法被 PhpStorm 识别,手动配置很有用,请参阅下面的已识别 webpack 配置名称列表

选择如何检测 webpack 配置

  1. 打开设置/首选项对话框 ( Ctrl+Alt+S) 并转到语言和框架 | JavaScript | 网页包

  2. 选择以下选项之一:

    • 自动 Webpack 配置:在这种模式下,对于一个 JavaScript 文件,PhpStorm 会先在这个 JavaScript 文件所在的文件夹中查找 webpack 配置文件,然后在其父文件夹中查找,以此类推。

      因此,如果您的项目由具有不同 webpack 配置的多个模块组成,则每个模块将使用其自己的 webpack 配置文件中的模块解析规则(如果找到此类配置)。

      PhpStorm 识别具有以下名称和顺序的 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 配置的位置。

      在此模式下,指定配置文件中的解析规则将应用于项目中的所有模块。

      如果您的 webpack 配置文件的名称无法被 PhpStorm 识别,请选择此选项,请参阅上面已识别的 webpack 配置名称列表

另请参阅webpack 官方网站上的入门。

编辑 webpack 配置文件

对于 webpack 版本 2 及更高版本,PhpStorm 在 webpack 配置文件的配置对象中提供代码补全和文档查找。即时提供代码完成。要查看符号的文档,请按Ctrl+Q

编辑 webpack 配置文件

解析模块

当您打开项目或编辑 webpack 配置文件(自动检测或在Settings/Preferences | Languages and Frameworks | JavaScript | Webpack 中指定)时,PhpStorm 会在后台分析配置,并根据收到的信息正确理解项目解析根解析别名。由于对项目配置的这种理解,PhpStorm 为 JavaScript 文件中的导入和导出符号提供了更精确的代码补全。结果,一切正常,无需您采取任何措施。

下图说明了项目中的模块解析,其中react-color路径是'./src/index.js'的别名。PhpStorm 正确解析 from 的导入react-color,提供对它的导航和导出符号的补全:

别名的模块解析

调试使用 webpack 的应用程序

您可以像调试任何 JavaScript 客户端应用程序一样调试使用 webpack 的应用程序,请参阅调试使用 Create React App 创建的 React 应用程序调试使用 Angular CLI 创建的 Angular 应用程序

最后修改:2022 年 1 月 17 日