Webpack SharedPackageModuleResolverPlugin
This is a webpack resolve plugin for a very specific case: When you're running multiple packages into a single project (a monorepo) and want one of the packages to rely on the dependencies of the other packages.
Reasoning
Consider this monorepo project structure:
packages/
├── appA/
│ ├── node_modules/
│ │ ├── react@17.0.0
│ │ └── lodash@5.0.0
│ └── app.js
│
├── appB/
│ ├── node_modules/
│ │ ├── react@15.0.0
│ │ └── lodash@5.0.0
│ └── app.js
│
└── lib/
├── card.js
└── button.js
- appA uses react 17 and lodash 5
- appB uses react 15 and lodash 5
- lib is a package of reusable components
- appA/app.js imports lib/card.js
- appB/app.js also imports lib/card.js
- lib/card.js imports react and lodash
The outcome without this plugin:
- lib/ has to install its own dependencies or rely on the root node_modules folder
- in the case of react, appA and appB are using different versions, so lib/ will be incompatible with one of them.
- in the case of lodash, appA and appB are using the same version, but lib/ can't use them. we'll endup with two copies of the same lodash version in the bundle
The outcome with this plugin:
- lib/ does not have to install its own dependencies
- when requested by appA, lib/* will resolve its modules from appA
- when requested by appB, lib/* will resolve its modules from appB
- we solve both issues: no duplicated lodash and no conflicting react versions
Instalation
npm install --save-dev shared-package-module-resolver-plugin
Usage
moduleexports = ... resolve: // note this is a resolver plugin, so it goes inside resolve.plugins, not inside the main plugin object plugins: packagesPath: path // This has to be the absolute path!, sharedPackage: 'lib' // do not add slashes or anything else. just the name of the package