Module aliasing in Webpack
Problem, Solution, Complications
Initially, when you start off a project, you don’t mind writing long relative paths and ignore all the troubles that come with it.
But as your project starts to scale past a certain point of complexity, you’ll find traversing up and down your file system is time-consuming and error-prone. Even with code-completion features like IntelliSense in place (supported by almost every IDE), this can become more challenging as your codebase grows.
Just imagine a situation where you are changing the directory structure of a module in your project. This will break all the module references and you will be forced to change all occurrences of the module throughout your project. It will be a daunting task!
Webpack allows you to create aliases to
require certain modules through the
resolve.alias property in your config without any additional plugins.
Concept of aliasing modules in Webpack can help you to turn the above file into this clean version.
Luckily there is an extension available to remedy the situation, Jump To Alias File
Another way is to let VSCode know how to resolve these aliases by adding a
jsconfig.json file to your project at the root.
That pretty much sums it up! If you have any questions or suggestions, don’t forget to leave a comment down below.
Have you enjoyed reading this blog? If yes, then click on the 👏 icon and share this article! Also, feel free to leave a comment.
Groww Engineering publishes technical pieces, latest knick-knacks in the coding world and convenient ways to tackle common programming problems.
Read more of our articles here.