runtime-parameter-plugin

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 = require('runtime-parameter-plugin')

module.exports = {
  entry: 'index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'index_bundle.js'
  },
  plugins: [
    new RuntimeParameterPlugin([
        'RuntimeVariable_1',
        { name: 'RuntimeVariable_2', isKeySet: false }
        { name: 'RuntimeVariableSet', isKeySet: true }
    ])
  ]
}

index.js

if (RuntimeVariable_1 === 'a') {
    console.log('RuntimeVariable_1 is a');
}

if (RuntimeVariable_2 === 'b') {
    console.log('RuntimeVariable_2 is b');
}

if (RuntimeVariableSet.Value1 === 'c') {
    console.log('RuntimeVariableSet.Value1 is c');
}

if (RuntimeVariableSet.Value2 === 'd') {
    console.log('RuntimeVariableSet.Value2 is d');
}

index_bundle.js

// ... webpack runtime ...


/***/ "./index.js":
/*!******************!*\
  !*** ./index.js ***!
  \******************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {

/* WEBPACK VAR INJECTION */(function(__webpack_runtime_parameter_RuntimeVariable_1, __webpack_runtime_parameter_RuntimeVariable_2, __webpack_runtime_parameter_RuntimeVariableSet_dot_Value1, __webpack_runtime_parameter_RuntimeVariableSet_dot_Value2) {if (__webpack_runtime_parameter_RuntimeVariable_1 === 'a') {
    console.log('RuntimeVariable_1 is a');
}

if (__webpack_runtime_parameter_RuntimeVariable_2 === 'b') {
    console.log('RuntimeVariable_2 is b');
}

if (__webpack_runtime_parameter_RuntimeVariableSet_dot_Value1 === 'c') {
    console.log('RuntimeVariableSet.Value1 is c');
}

if (__webpack_runtime_parameter_RuntimeVariableSet_dot_Value2 === 'd') {
    console.log('RuntimeVariableSet.Value2 is d');
}

/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! __webpack_runtime_parameters__ */ 0)["RuntimeVariable_1"], __webpack_require__(/*! __webpack_runtime_parameters__ */ 0)["RuntimeVariable_2"], __webpack_require__(/*! __webpack_runtime_parameters__ */ 0)["RuntimeVariableSet.Value1"], __webpack_require__(/*! __webpack_runtime_parameters__ */ 0)["RuntimeVariableSet.Value2"]))

/***/ }),

/***/ 0:
/*!**************************************!*\
  !*** __webpack_runtime_parameters__ ***!
  \**************************************/
/*! no static exports found */
/***/ (function(module, exports) {

module.exports = window["__webpack_runtime_parameters__"]

/***/ })

/******/ });

Now, you can assign window['__webpack_runtime_parameters__'] before loading the bundle to pass variables

<script>
    window['__webpack_runtime_parameters__'] = {
        'RuntimeVariable_1': 'a',
        'RuntimeVariable_2': 'b',
        'RuntimeVariableSet.Value1': 'c',
        'RuntimeVariableSet.Value2': 'd',
    };
</script>
<script src="./index_bundle.js"></script>

Integration with html-webpack-plugin

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:

{
"htmlWebpackPlugin": {
  "files": {
    "css": [],
    "js": [
      "index_bundle.js"
    ],
    "chunks": {
      "main": {
        "entry": "index_bundle.js",
        "css": [],
        "runtimeParameters": {
          "parameters": {
            "RuntimeVariable_1": {
              "usage": [
                "./index.js"
              ]
            },
            "RuntimeVariable_2": {
              "usage": [
                "./index.js"
              ]
            },
            "RuntimeVariableSet.Value1": {
              "usage": [
                "./index.js"
              ]
            },
            "RuntimeVariableSet.Value2": {
              "usage": [
                "./index.js"
              ]
            }
          },
          "variable": "window[\"__webpack_runtime_parameters__\"]"
        }
      }
    }
  }
}

webpack.config.js

const RuntimeParameterPlugin = require('runtime-parameter-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: 'index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'index_bundle.js'
  },
  plugins: [
    new RuntimeParameterPlugin([
        'RuntimeVariable_1',
        { name: 'RuntimeVariable_2', isKeySet: false }
        { name: 'RuntimeVariableSet', isKeySet: true }
    ]),      
    new HtmlWebpackPlugin({
        template: './index.ejs',
        inject: false,
        templateParameters: RuntimeParameterPlugin.htmlWebpackPluginTemplateParameters
    })
  ]
}