@mashroom/mashroom-dll-webpack-plugin
v2.0.0
Published
Webpack plugin that adds DLLs as shared resources to a Mashroom Portal App configuration
Downloads
31
Readme
Mashroom DLL Webpack Plugin
Webpack plugin that adds DLLs as shared resources to Mashroom Server 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 documentation.
To bundle React and Redux the webpack config in the DLL module would look like this:
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:
{
"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:
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:
"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": {}
}
}
]
}