Developments in Digital
Developments in Digital

Avoid relative imports with webpack

When working with webpack, it's common to reference other modules via relative paths, e.g:

import Error from '../chrome/Error'

This can get particularly difficult to maintain over time, particularly as you use additional nested folders and you wish to refactor code.

To make this easier, you can configure webpack to use a generic resolve alias to refer to your root source directory, for example:

// webpack.config.js
const path = require('path')

...

resolve: {
  alias: {
    '~': path.resolve(__dirname, './src'),
  },
},

Here, we're setting up the alias ~ to refer to the source folder ./src which is relative to the webpack configuration file.

Now, we can update our module imports to use the alias:

import Error from '~/chrome/Error'