See Also

This feature is supported in the Ultimate edition only.

IntelliJ IDEA integrates with the webpack module bundler. This support improves coding assistance in JavaScript files by taking into account webpack module resolution and resolve aliases. For webpack version 2 and higher, IntelliJ IDEA provides code completion and quick documentation look-up for options in webpack configuration files.

Before you start

  1. Download, install, and configure Node.js.
  2. Make sure the NodeJS plugin is installed and enabled. The  plugin is activated by default. If the plugin is disabled, enable it on the Plugins page as described in Enabling and Disabling Plugins.

Configuring webpack in IntelliJ IDEA

  1. Make sure webpack is added to package.json
    Webpack should be listed in the dependencies or devDependencies object of package.json.
    If webpack is missing, install it
    Open the built-in IntelliJ IDEA Terminal (press Alt+F12 or choose View | Tool Windows | Terminal on the main menu) and type npm install --save-dev webpack at the command prompt.
    For details, see Getting Started on the webpack Official website.
  2. Create a webpack configuration file
    Create a configuration file in the project root or elsewhere (New | JavaScript file). Learn more on the webpack Official website.
  3. Specify the webpack configuration file to use
    By default, IntelliJ IDEA analyses the webpack configuration file in the root of the project. To use another webpack configuration file, specify the path to it on the Webpack page (File | Settings | Languages and Frameworks | JavaScript | Webpack for Windows and Linux or IntelliJ IDEA | Preferences | Languages and Frameworks | JavaScript | Webpack for macOS).

    Based on the analysis of a webpack configuration file, IntelliJ IDEA understands the webpack configuration and provides coding assistance in JavaScript files, see Resolving modules below.

Editing a webpack configuration file

IntelliJ IDEA provides coding assistance in a webpack configuration file only if its name contains the webpack character string and webpack is listed in package.json.

For webpack version 2 and higher, IntelliJ IDEA provides code completion and documentation look-up in the configuration object of webpack.config.js. Code completion is provided on the fly. To view documentation for a symbol, press Ctrl+Q.

ws_webpack-conf.png

IntelliJ IDEA provides coding assistance in a webpack configuration file only if its name contains the webpack character string and webpack is listed in package.json.

Resolving modules

When you open a project or edit your webpack.config.js, IntelliJ IDEA analyses the configuration in the background and, based on the received information, properly understands the project resolve roots and resolve aliases. Thanks to this understanding of the project configuration, IntelliJ IDEA provides more precise code completion for imports and exported symbols in JavaScript files. As a result, everything works fine without any steps from your side.

The image below illustrates module resolution in a project where react-color is an alias for the path './src/index.js'. IntelliJ IDEA properly resolves the import from react-color, provides navigation to it and completion for the exported symbols:

ws_webpack-alias.png

Debugging applications that use webpack

You can debug applications that use webpack same way as you debug any JavaScript client-side application, see Debugging React apps created with Create React App and Debugging Angular apps created with Angular CLI.