Webpack replace module runtime

Question

I have a rather complex scenario.

We are building a desktop application with React which is wrapped with Electron, Webpack takes care of the Babel transpilation and chunking.

The application receives configuration data from a cms.

Part of the configuration may be a javascript class that needs to override one that resides in the application. The JS code as specified in the CMS will be vanilla Javascript code (ES6/7/8 same as what we use for the application)

I see 2 problems here:

1. How to transpile just this one class and

2. How to replace it runtime in the application

Is this even possible?

Regards

Answer 1

If with "The application receives configuration data from a cms." you mean runtime data, then, because Webpack acts at compile time, it cannot help you to transpile/replace your code (Runtime vs Compile time).

if your data from a CMS can be fetched at compile time, then, notice that you can return a promise from webpack.config.js.

module.exports = function webpackConfig(env) {
  const configs = {
    context: __dirname,
    plugins: []
    // etc...
  };

  return CMS
    .fetchConfig()
    .then(cmsConfigs => {
      const vars = {
        replaceClass: JSON.stringify(cmsConfigs.classINeed.toString())
      };

      configs.plugins.push(new webpack.DefinePlugin(vars));
      return configs;
    })
  ;
}