Electrode Webpack DLL Archetype
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.
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 namedreact
.
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 filecdn-assets.json
that map the bundle filename to the CDN URL.