0

I need to create a highly customizable webapp and wondered if and how it is possible to make use of es6 module loading in combination with webpack to override single files of a bigger app-stack.

So lets assume i have a directory structure like:

./src
|--/core
|--|--moduleA.js
|--|--moduleB.js
|--|--app.js
|--/theme
|--|--moduleB.js

and my app.js content is like

import moduleA from "./moduleA";
import moduleB from "./moduleB";

console.log(moduleA); // out: i am from core!
console.log(moduleB); // out: i am from theme!

So the theme/ directory simply overrides the core files...

Is there a way to solve this with webpack loader config or do i have to run a pre-build, in which i copy all files from core to a third location, followed by the same for the theme directory followed by a build from that third directory.

I know how to solve this with a third location and merged src files but i would prefer to solve this with webpack.

Philipp Wrann
  • 1,751
  • 3
  • 19
  • 29

1 Answers1

0

It should be possible with resolve modules.
You can add both core and theme as modules. Define theme first so webpack looks there first. 

modules: [
    path.resolve(__dirname, "src/theme"),
    path.resolve(__dirname, "src/core"),
    'node_modules',
]

Then import the modules without the relative path. Just from "moduleA"

lukas-reineke
  • 3,132
  • 2
  • 18
  • 26