Runtime Parameter Plugin
Plugin that allows passing parameters to JS bundles at runtime
Install
npm i --save-dev runtime-parameter-plugin
yarn add --dev runtime-parameter-plugin
Usage
webpack.config.js
const RuntimeParameterPlugin = moduleexports = entry: 'index.js' output: path: __dirname + '/dist' filename: 'index_bundle.js' plugins: 'RuntimeVariable_1' name: 'RuntimeVariable_2' isKeySet: false name: 'RuntimeVariableSet' isKeySet: true
index.js
if RuntimeVariable_1 === 'a' console; if RuntimeVariable_2 === 'b' console; if RuntimeVariableSetValue1 === 'c' console; if RuntimeVariableSetValue2 === 'd' console;
index_bundle.js
// ... webpack runtime ... /***/ "./index.js":/*!******************!*\ !*** ./index.js ***! \******************//*! no static exports found *//***/ { /* WEBPACK VAR INJECTION */ {if __webpack_runtime_parameter_RuntimeVariable_1 === 'a' console; if __webpack_runtime_parameter_RuntimeVariable_2 === 'b' console; if __webpack_runtime_parameter_RuntimeVariableSet_dot_Value1 === 'c' console; if __webpack_runtime_parameter_RuntimeVariableSet_dot_Value2 === 'd' console; /* WEBPACK VAR INJECTION */} /***/ } /***/ 0:/*!**************************************!*\ !*** __webpack_runtime_parameters__ ***! \**************************************//*! no static exports found *//***/ { moduleexports = window"__webpack_runtime_parameters__" /***/ } /******/ });
Now, you can assign window['__webpack_runtime_parameters__']
before loading the bundle to pass variables
html-webpack-plugin
Integration with It is possible to return custom template parameters with html-webpack-plugin
.
RuntimeParameterPlugin
has htmlWebpackPluginTemplateParameters
static method to use with html-webpack-plugin
.
It returns the same parameters as html-webpack-plugin
by default with adding runtimeParameters
property to each chunk that has them:
webpack.config.js
const RuntimeParameterPlugin = const HtmlWebpackPlugin = moduleexports = entry: 'index.js' output: path: __dirname + '/dist' filename: 'index_bundle.js' plugins: 'RuntimeVariable_1' name: 'RuntimeVariable_2' isKeySet: false name: 'RuntimeVariableSet' isKeySet: true template: './index.ejs' inject: false templateParameters: RuntimeParameterPluginhtmlWebpackPluginTemplateParameters