I've the following structure:
Project1
- app.ts
- tsconfig.json
- webpack.config.js
ProjectShared
- shared.ts
- tsconfig.json
- webpack.config.js
ProjectShared generates a DllPlugin with "./shared.ts" and for example "jquery" and Project1 references it. In my HTML of Project1 I want to include that referenced vendor.js and the bundle.js.
Now when I import for example jquery from Project1 it's using the code from the DLL so that part works as expected. (./node_modules/jquery is the same in both contexts)
However if I import "../ProjectShared/shared" it compiles but this code is not included from the DLL but in the bundle again. (../ProjectShared/shared.ts is not the same as ./shared.ts)
If I then switch the context of the ReferencePlugin to ../ProjectShared/ it works but jquery won't be used from DLL then. (./node_modules/jquery != ../ProjectShared/node_modules/jquery)
I can see why that happens (different contexts) but what if I want to share code between that two projects without having to move them to modules but also want modules to be shared aswell?
I can see that it might work if instead of "jquery" I use "../ProjectShared/node_modules/jquery" cause then the context is the same again. But that looks ugly even if I use paths in tsconfig or resolve.alias in webpack.
What is the recommended way to do something like that?
