Make absolute paths relative to the project root in Webpack

Question

I find that I need to type ../ a lot to require() files. My directory structure includes these:

js/   components/     ...   actions/     ... 

From the components folder, I need to do import foo from '../actions/fooAction'. Is it possible to make the root directory the root of the project? I.e. I want to do import foo from '/actions/fooAction' instead. I tried setting Webpack's resolve.root option, but it didn't seem to do anything.

Answer 1

The resolve.root option does not modifiy how file modules are resolved.

A required module prefixed with '/' is an absolute path to the file. For example, require('/home/marco/foo.js') will load the file at /home/marco/foo.js.

The / resolves to the root of your file system.

Maybe what you want is to resolve your js folder as a modules directory.

webpack.config.js

resolve: {   root: path.resolve('./js') } 

With this configuration added to your config file will tell webpack to resolve any import or require relative to your js folder. Then, instead of using

import foo from '../actions/fooAction' 

you will be able to:

import foo from 'actions/fooAction` 

Mind the lack of / at the beginning.