In projects that consist of multiple modules with different webpack configurations, PyCharm can automatically detect the relevant configuration file for each module and use the module resolution rules from it, see Specifying the webpack configuration file to use below.
For webpack version 2 and later, PyCharm provides code completion and quick documentation look-up for options in webpack configuration files.
Before you start
Make sure you have Node.js on your computer.
Configuring webpack in PyCharm
Add webpack to your package.json
Make sure webpack is listed in the
devDependenciesobject of your package.json.
If webpack is missing, open the embedded Terminal(Alt+F12) and type:
npm install --save-dev webpack
Create webpack configuration files
Create one or several configuration files depending on your project structure (webpack official website.). Learn more from the
Specify the webpack configuration files to use
In PyCharm, you can choose between two configuration modes - automatic and manual.
With manual configuration, 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 PyCharm, see the list of recognized webpack config names below.
Choose how to detect webpack configuration
Open the Settings/Preferences dialog Ctrl+Alt+S and go to .
Select one of the following options:
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).
Manual Webpack configuration: 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 PyCharm, see the list of recognized webpack config names above.
See also Getting Started on the webpack official website.
Editing a webpack configuration file
For webpack version 2 and later, PyCharm 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.
import statements in a webpack project, PyCharm executes the webpack configuration file, which may contain some potentially malicious code. To avoid problems, PyCharm displays a warning and lets you decide on how to proceed.
If you click Skip, PyCharm disables analysis of the webpack configuration in the current project. As a result, PyCharm might not resolve some of the imports in the project or add imports that don't use resolution rules configured in the webpack configuration.
To re-enable analysis of the webpack configuration, open the Settings/Preferences dialog Ctrl+Alt+S, go to , and select automatic or manual detection for webpack configuration, see Specify the webpack configuration files to use above.
You can configure what sources PyCharm should consider safe and accordingly load them and run webpack configurations without showing the notification. Learn more from Project security.
In the Settings/Preferences dialog Ctrl+Alt+S, go to .
On the Trusted Locations page, create a list of local directories where the projects you consider trusted reside. Click OK to save the changes.
PyCharm loads projects from those locations without showing any security notifications.
The image below illustrates module resolution in a project where
react-color is an alias for the path './src/index.js'. PyCharm properly resolves the import from
react-color, provides navigation to it and completion for the exported symbols:
Debugging applications that use webpack