@mashroom/mashroom-dll-webpack-plugin v2.0.0

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": {}
                }
            }
        ]
    }

Demo

See Mashroom Demo Shared DLL