https://github.com/mrfrankel/share-loader
Share modules between webpack applications
https://github.com/mrfrankel/share-loader
angular ember feature-module loader micro-frontends react vuejs webpack webpack-loader webpack-plugin
Last synced: 12 months ago
JSON representation
Share modules between webpack applications
- Host: GitHub
- URL: https://github.com/mrfrankel/share-loader
- Owner: MrFrankel
- Created: 2018-02-15T21:47:31.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T03:34:31.000Z (about 3 years ago)
- Last Synced: 2025-02-27T01:08:31.635Z (about 1 year ago)
- Topics: angular, ember, feature-module, loader, micro-frontends, react, vuejs, webpack, webpack-loader, webpack-plugin
- Language: TypeScript
- Size: 5.05 MB
- Stars: 64
- Watchers: 8
- Forks: 25
- Open Issues: 108
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/share-loader)
[](https://www.npmjs.com/package/share-loader)
[](https://github.com/MrFrankel/share-loader/blob/master/LICENSE)
Share Loader
The share loader allows you to share modules between webpack builds via a global namespace
Install
```bash
npm i share-loader --save-dev
```
Or
```bash
yarn add share-loader --save-dev
```
Usage
webpack config of exposing app
```js
module: {
rules: [{
test: /\.js?$/,
use: [{
loader: 'share-loader',
options: {
modules: [/@angular/, /@uirouter\/angular/],
exclude: [/@angular\/material/],
namespace: 'some-name-space'
}
}]
}]
}
```
webpack config of consumer apps
```js
const {Externals} = require('./share-loader');
externals: [
Externals({
namespace: 'some-name-space',
modules: [/@angular/, /@uirouter\/angular/]
})
],
output: {
library: 'some-name-space',
libraryTarget: 'umd'
}
Example
1. In the root folder, run npm bootstrap
2. Run npm run build:prod in the ext-app-1 root
3. Host the ext1.js file from ext-app-1 project in some localhost server
4. Change the <%path-to-server-host%> in the shell project app.state.ts
5. Run npm run serve:dev in the shell project root
Example-cli
1. In the root folder, run npm bootstrap
2. In "shell app" folder run npm run start:prod
3. In the "ext-app1" folder run npm run start:ext:prod
4. For AOT run npm serve --prod in "shell-app" and npm run serve:ext:prod in "ext-app1"
5. You can also run ext-app1 in standalone mode with ng serve
```