Webpack aliases and relative paths
Let’s say that we have a really simple components hierarchy that one uses the other. A view of this example could be this one:
That means we have a Utility component (you could consider it a separate file) that is used by both App and Home component and on top of this Home component uses also an external service. This is reflected in the file system as:
Even in new ES6 module system when we need a reference in a piece of code in our project that is not a node module, we need to reference it by relative path to the file we need it. So to make it more concrete the import code for App component looks like this:
import Home from './home.jsx';
And to make the issue with relative paths more obvious lets see the import statements of Home component:
import Utility from './common/utility.jsx';
From the example above we should realise that each time we need to use a piece of code in our application, we need to now in which exact folder we are and then start calculating the relative path to this file. This is something that really annoys me and is not only that. Just think the case that the project evolves and the utility file is referenced in multiple places. And then we need to either rename the file or more probably reorganise the folder structure and choose a different one. We have to find all the files that reference this file and make the appropriate changes.
As mention before Webpack has a section in it’s configuration (resolve section) that could solve this issue and it’s very powerful. We can declare aliases in many ways so we could not rely on relative paths but just reference our code as regular node modules.
First let’s see what we need to add to the webpack.config file:
It’s important to configure the root with an absolute path so the path in the alias section is becoming relative to where the webpack.config file resides. Of course in a real project where we have more files we should probably extract this object to a separate file and import it in webpack.config file. After that is our responsibility to have unique names in aliases something that probably was easier before, due to folder names.
But now is interesting to see how the import statements of components look like. Let’s begin with App component as before:
import Home from 'home';
And let’s also see the Home component
import Utility from 'utility';
By now should be obvious that it’s easier to reference any file in our project. On top of that, where every file resides exists only in one place so if there is a need to either rename a file or restructure the folders the only place we have to touch is the aliases. In the configuration I also added the extensions option as it’s a way not to include the extension of the file in the path.
You can find the code for this example in the corresponding Github repository.