Avoid relative import paths in React.js using Webpack aliases
Here’s a little tip for your React.js projects that can dramatically improve your developer experience.
So, if you have been working with modern JavaScript lately, React.js or anything similar, you might have used relative paths to import modules like so.
For instance, let’s say if I want to import a module that is two directories up from the current file location, I would need to import it like so.
import Order from '../../components/order';
Now, it kind of works but if you can notice this kind of imports are not easy to comprehend and you’ve to keep track of the level of the directory you’re currently in which, in my opinion, is not friendly at all and kind of suck.
How do we make this a little straightforward? Well, it turns out if you’re using Webpack as a module bundler for your project, it’s rather pretty easy.
Webapck Aliases
By setting resolve.aliases in your Webpack config (webpack.config.js), you can make the process of importing modules pretty easy.
So, if we want to add an alias for the src/components from our previous example, we can do it like so.
const path = require('path');
module.exports = {
//...
resolve: {
alias: {
@Components: path.resolve(__dirname, 'src/components/'),
},
},
};
As you can tell, now we have an alias for the src/components directory. Notice, I have prepended @ to the alias to easily distinguish between an alias import vs. the normal import when we going to import things.
Since the alias is now ready, we can import modules using it like so.
import Order from '@Components/order';
Useful, right?
Like this article?
Buy me a coffee
👋 Hi there! I'm Amit. I write articles about all things web development. You can become a sponsor on my blog to help me continue my writing journey and get your brand in front of thousands of eyes.
