Folder aliases using webpack

In order to define a folder alias using webpack, all you have to do is write the following in `webpack.config.js`:

const path = require('path');

module.exports = {
  resolve: {
    alias: {
      '@': path.resolve('src'),
      images: path.resolve('assets/images'),

Now , if you want to import something from `assets/images`, all you need do to is

import image from 'images/[path]'
regardless of the current directory.

If the location of any of the folders defined with aliases ever changes, you no longer need to update all the imports - changing the path in `webpack.config.js` will take care of everything.

Denisa Halmaghi
17 Nov 2021
« Back to post