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.
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"