I want to write a short article where once more I emphasize one of the superpowers of webpack.

Have you ever came across this in some of your project’s codebase(s)?

Sample deep relative import in JavaScript

Wouldn’t it be pleasing to refer to a top-level module/namespace in any place you need to import something?

Sample good import with webpack resolve alias configured

With webpack, having something like that, it’s very straightforward. Aliasing module names for shorter and clear import statements have considerable gains in terms of codebase discoverability, codebase navigation, and of course, general readability. Aliasing modules is especially helpful for large codebases organized in modules.

Aliasing modules is as simple as using webpack Resolve configurations, more precisely resolve.alias. To follow up on the previous example, here is how your webpack.config.js file should look like if you want to be able to import your utils module as displayed above.

Sample webpack.config.js file with aliases configured

Now you can go ahead and remove all those 100 characters long relative imports at the beginning of your JavaScript files.