About

Last updated 4 months ago

Electrode Webpack DLL Archetype

Electrode Webpack DLL Archetype

Purpose

This archetype helps with creating a [npm] module that releases JavaScript [webpack] DLLs.

The DLL package then can be consumed by an Electrode application based on the Electrode app archetype.

Other common DLL consumption support:

  • Electrode apps will automatically load DLL JS bundles in dev mode.

  • Upload your JS to your CDN server and Electrode app archetype will save the URL mapping.

  • In production mode, Electrode will auto load the DLL JS bundle from your CDN server.

  • If module packed into the DLL has different version than what's installed in your node_modules, Electrode app archetype warn you.

Creating Your DLL module

Steps to create a module for publishing DLLs:

$ mkdir my-react-dll
$ cd my-react-dll
$ npm init --yes
$ npm install --save react react-dom electrode-archetype-webpack-dll
$ npm install --save-dev electrode-archetype-webpack-dll-dev

Then add these files:

xclap.js:

require("electrode-archetype-webpack-dll")();

index.js:

module.exports = {
entry: {
react: ["./src/dll-react.js"]
}
};

Where src/dll-react.js should import the modules that should be included in the DLL named react.

Add these to package.json:

{
"main": "index.js",
"scripts": {
"prepare": "clap build",
"prepublishOnly": "npm run cdn-publish",
"prepack": "clap npm:prepack",
"postpack": "clap npm:postpack",
"cdn-publish": "my-cdn-publish-task && clap save-cdn-map --file=cdn-assets.json"
}
}
  • Where my-cdn-publish-task should upload the production JS bundle to your CDN server and create a file cdn-assets.json that map the bundle filename to the CDN URL.