Make webpack paths relative to current directory

Question

The Question:

I am using Rails 5.0 with Webpacker, and I am trying to setup our initial Webpack config. In Rails+Webpacker Webpack generates a different build file for each item in the app/javascript/packs folder. Is there a way to get these Webpack "packs" to resolve different paths for modules based on a files containing folder?

The Problem:

Redundant sections of paths in my import statements resulting in imports like:

main/pages/home.js:

import Engine from 'main/engine'
import Routes from 'main/engine/routes.js' 

dev_panel/pages/home.js:

import Engine from 'dev_panel/engine'
import Routes from 'dev_panel/engine/routes.js' 

etc...

And this is compounded for every file and subdirectory of course. This is not only monotonous, but also makes re-organization of files and code a headache.

Desired Pattern:

main/pages/home.js:

// but still refers to /main/engine/routes.js
import Engine from 'engine'
import Routes from 'engine/routes.js' 

dev_panel/pages/home.js:

// but still refers to /dev_panel/engine/routes.js
import Engine from 'engine'
import Routes from 'engine/routes.js' 

etc...

Example Structure:

app/javascript
├── packs
│   ├── dev_panel.js
│   ├── admin_panel.js
│   └── main.js
├── main
│   ├── data.js
│   ├── engine
│   │   ├── index.js
│   │   └── routes.js
│   ├── index.js
│   └── pages
│       ├── home.js
│       └── index.js
├── dev_panel
│   ├── data.js
│   ├── engine
│   │   ├── index.js
│   │   └── routes.js
│   ├── index.js
│   └── pages
│       ├── home.js
│       └── index.js
└── admin_panel.js
    ├── data.js
    ├── engine
    │   ├── index.js
    │   └── routes.js
    ├── index.js
    └── pages
        ├── home.js
        └── index.js

Answer 1

You can use .. to go one level up in the directory structure:

import Engine from '../engine'
import Routes from '../engine/routes.js'

Answer 2

You can create a file common-exports.js at the top directory which reexports things that you import in many files. That way you can import everything from that file.

common-exports.js :

export { default as Engine } from 'main/engine';
export { default as Routes } from 'main/engine/routes';

main/pages/home.js :

import { Engine, Routes } from 'common-exports';