[Webpack] Resolve import/require path that refers to root directory by resolve.root

Now, if we have had a chance references to root directory with relative path (../…/src). In this case you would be feel bad with this, why? try to imagine if you are working on deep level directory, and root directory is so far from your current directory or if your reference path seem like this (../../../../../../../src)

So, I have the solution to solve this problem that you might be faced with it.

For example:

if current directory is: src/client/app/index.js

index.js

Instead of referencing with old style,

import HelloComponent from '../../src/components/ggez/HelloComponent'

we will use this statement instead,

import HelloComponent from 'components/ggez/HelloComponent'

webpack.config.js

resolve: {
 root: [
    path.resolve(__dirname, ‘src’),
    path.resolve(__dirname, ‘node_modules’)
 ],
 extensions: [‘’, ‘.js’]
 },

Here is my directory structure

Solutions: