AppCode 2019.2 Help

Webpack

AppCode 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 later, AppCode provides code completion and quick documentation look-up for options in webpack configuration files.

Configuring webpack in AppCode

  1. Make sure webpack is listed in the dependencies or devDependencies object of your package.json.

    If webpack is missing, open the embedded Terminal (⌥F12) and type:

    npm install --save-dev webpack

  2. Create a configuration file in the project root or elsewhere (New | JavaScript file). Learn more from the webpack official website.

  3. Specify the webpack configuration file to use. By default, AppCode analyses the webpack configuration file in the root of the project.

    To use another webpack configuration file, in the Preferences dialog (⌘,), go to Languages and Frameworks | JavaScript | Webpack and specify the location of the configuration file to use.

See also Getting Started on the webpack Official website.

Editing a webpack configuration file

For webpack version 2 and later, AppCode 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 F1.

ws_webpack-conf.png

Resolving modules

When you open a project or edit your webpack.config.js specified on Settings/Preferences | Languages and Frameworks | JavaScript | Webpack, AppCode 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, AppCode 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'. AppCode 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.

Last modified: 10 October 2019