resolve.modules per entry point

Question

I have a project that uses multiple entry points to create a few distinct apps. The directory structure looks something like:

.
├── app-1
│   └── components
│       ├── a.js
│       └── b.js
├── app-2
│   └── components
├── app-3
│   └── components
├── package.json
└── webpack.config.js

Within any of the apps, I would like to be able to import files without referencing the app name. For example, in app-1/components/a.js I would like to be able to import b.js with

import B from 'components/b'

and have webpack know that this is referring to app-1 because that's where the file lives, and not, say, app-3 in case the same path exists there.

With the following setup in webpack.config.js:

...

resolve: {
  modules: [
    path.resolve(__dirname, 'app-3'),
    path.resolve(__dirname, 'app-2'),
    path.resolve(__dirname, 'app-1'),
    'node_modules',
  ],
}

...

app-3 will have the highest priority. What I would really like is to have no priority, but instead search for a module based on the app it lives in.

Not sure if I'm explaining this properly, but I've scoured the web for a solution and can't find one. Would love for someone to come along with a easy fix and a snarky "do you even google"

Answer 1

This plugin could help: https://www.npmjs.com/package/resolve-entry-modules-webpack-plugin.

It does exactly what you want, add the entry to the resolution path while keeping distinct entries not importing from each other.