https://github.com/nonblocking/mashroom-dll-webpack-plugin
https://github.com/nonblocking/mashroom-dll-webpack-plugin
Last synced: over 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/nonblocking/mashroom-dll-webpack-plugin
- Owner: nonblocking
- License: mit
- Created: 2019-11-15T08:10:02.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-24T09:14:23.000Z (over 3 years ago)
- Last Synced: 2024-10-30T03:26:38.818Z (almost 2 years ago)
- Language: TypeScript
- Size: 483 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Mashroom DLL Webpack Plugin
Webpack plugin that adds *DLLs* as shared resources to [Mashroom Server](https://www.mashroom-server.com) Portal Apps.
This is useful to share vendor libraries (e.g. React) between multiple Apps, which drastically reduces the bundle sizes.
## Usage
### Bundling the DLL
There is nothing specific here, just follow the [DLLPlugin](https://webpack.js.org/plugins/dll-plugin/) documentation.
To bundle React and Redux the *webpack* config in the DLL module would look like this:
```js
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: ['react', 'react-dom', 'redux', 'react-redux'],
output: {
path: __dirname + '/dist',
filename: "my_dll.js",
// MUST contain the hash!
library: "my_dll_[hash]"
},
plugins: [
new webpack.DllPlugin({
path: path.join(__dirname, "dist", "my_dll_manifest.json"),
// MUST be the same as output.library!
name: "my_dll_[hash]"
})
]
};
```
### Using the DLL
In your App module add this plugin to the dependencies:
```json
{
"devDependencies": {
"@mashroom/mashroom-dll-webpack-plugin": "^1.0.3"
}
}
```
And use the *webpack* *DllReferencePlugin* and this plugin to add the library as *sharedResource* to
the Portal App:
```js
const webpack = require('webpack');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MashroomWDLLWebpackPlugin = require('@mashroom/mashroom-dll-webpack-plugin');
module.exports = {
// ...
plugins: [
new CleanWebpackPlugin(),
new MashroomWDLLWebpackPlugin({
manifest: require("my-dll-module/dist/my_dll_manifest.json"),
dllPath: require.resolve("my-dll-module/dist/my_dll.js")
}),
new webpack.DllReferencePlugin({
manifest: require("my-dll-module/dist/my_dll_manifest.json"),
})
],
}
```
This configuration is going to copy the DLL (my_dll.js) to the output path and adds it to the *Mashroom* config in *package.json* like this:
```json
"mashroom": {
"plugins": [
{
"name": "Demo Shared DLL App",
"type": "portal-app",
"bootstrap": "startupDemoSharedDLLApp",
"sharedResources": {
"js": [
"my_dll_910502a6fce2f139eff8.js"
]
},
"resources": {
"js": [
"bundle.js"
]
},
"defaultConfig": {
"resourcesRoot": "./dist",
"appConfig": {}
}
}
]
}
```
## Demo
See [Mashroom Demo Shared DLL](https://github.com/nonblocking/mashroom-demo-shared-dll)