Configuring webpack in WebStorm
- Make sure webpack is listed in the
devDependenciesobject of your package.json. If webpack is missing, install it:
- Open the built-in WebStorm Terminal (Alt+F12).
- At the command prompt, type
npm install --save-dev webpack.
- Create a configuration file in the project root or elsewhere (webpack Official website. ). Learn more from the
- Specify the webpack configuration file to use. By default, WebStorm analyses the webpack configuration file in the root of the project. To use another webpack configuration file:
- On the Webpack page that opens, specify the location of the configuration file to use.
Editing a webpack configuration file
For webpack version 2 and higher, WebStorm 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.
When you open a project or edit your
The image below illustrates module resolution in a project where
react-color is an alias for the path
'./src/index.js'. WebStorm properly resolves the import from
react-color, provides navigation to it and completion for the exported symbols:
Debugging applications that use webpack