# Webpack > **TL;DR** > Available only in IntelliJ IDEA with the Ultimate subscription: [download](https://www.jetbrains.com.cn/en-us/idea/download/) to try or [explore the features](https://www.jetbrains.com.cn/en-us/products/compare/?product=idea&product=idea-ult). > > > > > > Required plugins: > > > > `JavaScript and TypeScript`, `Webpack` -  the plugins are bundled with IntelliJ IDEA and enabled by default. IntelliJ IDEA integrates with the [webpack](https://webpack.js.org/) module bundler. This support improves coding assistance in JavaScript files by taking into account [webpack module resolution](https://webpack.js.org/concepts/module-resolution/) and [resolve aliases](https://webpack.js.org/configuration/resolve/). In projects that consist of multiple modules with different webpack configurations, IntelliJ IDEA can automatically detect the relevant configuration file for each module and use the module resolution rules from it, refer to [Specifying the webpack configuration file to use](#specify_webpack_configuration_file_auto_detection) below. For webpack version 2 and later, IntelliJ IDEA provides code completion and quick documentation look-up for options in webpack configuration files. ## Before you start Procedure: 1. Download and install [Node.js](http://nodejs.org/#download). 2. Make sure the JavaScript and TypeScript and Webpack required plugins are enabled on the Settings | Plugins page, tab Installed. For more information, refer to [Managing plugins](managing-plugins.html). ## Configuring webpack in IntelliJ IDEA Procedure: Add webpack to your package.json * Make sure webpack is listed in the `dependencies` or `devDependencies` object of your `package.json`. If webpack is missing, open your command-line shell or the embedded Terminal (`Alt+F12` (Windows), `⌥ F12` (macOS), `⌥ F12` (IntelliJ IDEA Classic (macOS)), `⌘ ⌃ T` (macOS System Shortcuts), `Alt+F12` (XWin), `Alt+F12` (GNOME), `Alt+F12` (KDE), `Alt+F12` (Emacs), `Alt+F12` (Sublime Text), `⌥ F12` (Sublime Text (macOS)), `Alt+F12` (NetBeans), `Ctrl+Alt+1` (Visual Studio), `⌘ ⌃ 1` (Visual Studio (macOS)), `Alt+F12` (Eclipse), `⌥ F12` (Eclipse (macOS))) and type: `npm install --save-dev webpack` Procedure: Create webpack configuration files * Create one or several configuration files depending on your project structure: select a parent folder in the Project tool window (`Alt+1` (Windows), `⌘ 1` (macOS), `⌘ 1` (IntelliJ IDEA Classic (macOS)), `⌘ 1` (macOS System Shortcuts), `Alt+1` (XWin), `Alt+1` (GNOME), `Alt+1` (KDE), `Alt+1` (Emacs), `Alt+1` (Sublime Text), `⌘ 1` (Sublime Text (macOS)), `Ctrl+1` (NetBeans), `Ctrl+Alt+L` (Visual Studio), `⌘ ⌥ L` (Visual Studio (macOS)), `Alt+1` (Eclipse), `Alt+1` (Eclipse (macOS))) and select `New | JavaScript file` from the context menu. Learn more from the [webpack official website](https://webpack.js.org/guides/getting-started/#using-a-configuration). ### Specify the webpack configuration files to use Based on the analysis of a webpack configuration file, IntelliJ IDEA understands the webpack configuration, resolves modules, and provides coding assistance in JavaScript files, see [Resolving modules](#webpack_module_resolution) below. In IntelliJ IDEA, you can choose between two configuration modes – automatic and manual. With [automatic configuration](#specify_webpack_configuration_file_auto_detection_procedure), IntelliJ IDEA auto-detects the relevant webpack configuration file for each JavaScript file. With [manual configuration](#specify_webpack_configuration_file_manual), you specify the webpack configuration file to use in your project. Manual configuration is useful if the name of your webpack configuration file is not recognized by IntelliJ IDEA, refer to the [list of recognized webpack config names](#specify_webpack_configuration_recognized_names) below. Procedure: Choose how to detect webpack configuration 1. Open the Settings dialog (`Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))) and go to `Languages & Frameworks | JavaScript | Webpack`. 2. In the Detect Webpack configuration files for module resolution area, select one of the following options: * Automatically: In this mode, for a JavaScript file, IntelliJ IDEA will first look for a webpack configuration file in the folder where this JavaScript file is located, then in its parent folder, and so on. As a result, if your project consists of multiple modules with different webpack configurations, each module will use the module resolution rules from its own webpack configuration file (if such config is found). IntelliJ IDEA recognizes JavaScript or TypeScript webpack configuration files with the following names and in the following order: * `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` * Manually: In the Configuration file field, specify the location of the webpack config to use. In this mode, the resolution rules from the specified configuration file will be applied to all modules in your project. Select this option if the name of your webpack configuration file is not recognized by IntelliJ IDEA, refer to the [list of recognized webpack config names](#specify_webpack_configuration_recognized_names) above. See also [Getting Started](https://webpack.js.org/guides/getting-started/) on the webpack official website. ## Editing a webpack configuration file For webpack version 2 and later, IntelliJ IDEA provides code completion and documentation look-up in the configuration object of webpack configuration files. Code completion is provided on the fly. To view documentation for a symbol, press `Ctrl+Q` (Windows), `F1` (macOS), `⌃ J` (IntelliJ IDEA Classic (macOS)), `⌘ I` (macOS System Shortcuts), `Ctrl+Q` (XWin), `Ctrl+Q` (GNOME), `Ctrl+Q` (KDE), `Ctrl+Q` (Emacs), `Ctrl+Q` (Sublime Text), `Ctrl+Q` (Sublime Text (macOS)), `Ctrl+Q` (NetBeans), `Ctrl+K, I` (Visual Studio), `⌘ K, I` (Visual Studio (macOS)), `Alt+Middle-Click` (Eclipse), `⌥ Middle-Click` (Eclipse (macOS)). ![Editing a webpack configuration file](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_webpack-conf.png) > **Tip:** > 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 a webpack configuration file (either [auto-detected](#specify_webpack_configuration_file_auto_detection) or specified on Settings | Languages & Frameworks | JavaScript | Webpack), IntelliJ IDEA analyzes the configuration in the background and, based on the received information, properly understands the project [resolve roots](https://webpack.js.org/concepts/module-resolution) and [resolve aliases](https://webpack.js.org/configuration/resolve/). 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: ![Module resolution for aliases](https://resources.jetbrains.com.cn/help/img/idea/2026.2/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, refer to [Debugging React apps created with Create React App](https://blog.jetbrains.com/webstorm/2017/01/debugging-react-apps/) and [Debugging Angular apps created with Angular CLI](https://blog.jetbrains.com/webstorm/2017/01/debugging-angular-apps/). ## See also ### Web Resources [Support for webpack enhanced module resolution in IntelliJ IDEA](https://blog.jetbrains.com/webstorm/2017/06/webstorm-2017-2-eap-172-2827/) [Completion in webpack 2 configuration files](https://blog.jetbrains.com/webstorm/2017/04/webstorm-2017-1-1/) ### External Links [Getting started with webpack](https://webpack.js.org/guides/getting-started/)