template-module-federation-webpack-plugin
html-webpack-plugin for module federation
Installation
npm i --save-dev template-module-federation-webpack-plugin
Usage
Create template, for example src/templates/widget.ejs:
console.info('Version: <%= VERSION %>');
window.CONFIG = '{{ clientConfig }}';Add webpack plugin to config:
import { TemplateModuleFederationPlugin } from 'template-module-federation-webpack-plugin';
// ...
plugins: [
// ...
new ModuleFederationPlugin({
// ...
filename: 'widget.js',
// ...
}),
// ...
new TemplateModuleFederationPlugin({
templateParameters: {
VERSION: 'v1.2',
},
paths: [
{
template: 'src/templates/widget.ejs',
output: 'widget-entry.js',
inlineFilenames: ['widget.js'],
},
],
}),
//...
]Options
| Option | Type | Description |
|---|---|---|
| templateParameters | object | The object that is passed to the template engine. In the template, for example templateParameters: { foo: 'bar' }, you can use <%= foo %> (without formatting <%- foo %>) |
| paths[number].template | string | Path to the template |
| paths[number].output | string | Path to the output file |
| paths[number].inlineFilenames | Array | Inline file names |
Advanced Usage
Add inline scripts
For example, add inline script analytics.js (entry) to template src/templates/widget.ejs:
// ...
<%- compilation.assets["analytics.js"].source() %>
// ...Move inline scripts
For example, move inline scripts into template src/templates/widget.ejs:
console.log("start");
// ...
<%- inlineFilesContent %>
// ...
console.log("end");