IntelliJ IDEA
 
2023.2
快捷方式：Windows
获取 IntelliJ IDEA
  1. 非 JVM 技术
  2. JavaScript
  3. 网页包

最终的
网页包

最后修改时间：2023 年 9 月 5 日

仅在 IntelliJ IDEA Ultimate 中可用：下载以尝试或比较版本

所需插件：

JavaScript and TypeScript, Webpack - 这些插件仅在 IntelliJ IDEA Ultimate 中可用，默认情况下启用。

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

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

对于 webpack 版本 2 及更高版本，IntelliJ IDEA 为 webpack 配置文件中的选项提供代码补全和快速文档查找。

在你开始之前

在 IntelliJ IDEA 中配置 webpack

将 webpack 添加到 package.json

  • 确保 webpack 列在package.json的dependencies或对象中。devDependencies

    如果缺少 webpack，请打开嵌入式终端( ) 并输入：AltF12

    npm install --save-dev webpack

创建 webpack 配置文件

  • 根据您的项目结构创建一个或多个配置文件：在“项目”工具窗口中选择一个父文件夹，然后选择“新建”|“配置文件” 。上下文菜单中的JavaScript 文件。从webpack 官方网站了解更多信息。

指定要使用的 webpack 配置文件

基于对 webpack 配置文件的分析，IntelliJ IDEA 可以理解 webpack 配置、解析模块并在 JavaScript 文件中提供编码帮助，请参阅下面的解析模块。

在 IntelliJ IDEA 中，您可以选择两种配置模式 - 自动和手动。

通过自动配置，IntelliJ IDEA 会自动检测每个 JavaScript 文件的相关 webpack 配置文件。

通过手动配置，您可以指定要在项目中使用的 webpack 配置文件。如果 IntelliJ IDEA 无法识别您的 webpack 配置文件的名称，则手动配置非常有用，请参阅下面的可识别 webpack 配置名称列表。

选择如何检测 webpack 配置

  1. 打开“设置”对话框 ( ) 并转到“语言和框架”| JavaScript | 网页包。CtrlAlt0S

  2. 在“检测模块解析的 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 配置的位置。

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

      如果 IntelliJ IDEA 无法识别您的 webpack 配置文件的名称，请选择此选项，请参阅上面可识别的 webpack 配置名称列表。

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

编辑 webpack 配置文件

对于 webpack 版本 2 及更高版本，IntelliJ IDEA 在 webpack 配置文件的配置对象中提供代码完成和文档查找。代码完成是动态提供的。要查看符号的文档，请按。Ctrl0Q

编辑 webpack 配置文件

提示

仅当 webpack 配置文件的名称包含字符串并且 webpack 在package.jsonwebpack中列出时， IntelliJ IDEA 才会在 webpack 配置文件中提供编码帮助。

解析模块

当您打开项目或编辑 webpack 配置文件（自动检测或在Settings | Languages & Frameworks | JavaScript | Webpack中指定）时，IntelliJ IDEA 在后台分析配置，并根据收到的信息正确理解项目解析根并解析别名。由于对项目配置的了解，IntelliJ IDEA 为 JavaScript 文件中的导入和导出符号提供了更精确的代码完成。因此，一切正常，无需您进行任何操作。

下图说明了项目中的模块解析，其中react-color路径的别名为'. /src/index.js '。IntelliJ IDEA 正确解析了导入react-color，提供导航并完成导出符号：

别名的模块解析

调试使用 webpack 的应用程序

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

也可以看看

外部链接

网络资源