Webpack Configuration extensibility

Copy link to this section

Disclaimer

Manipulating webpack configurations can cause issues in either your package or packages depending on it. If you need to extend the configurations, make sure you are protecting your code from undefined configurations and maintaining the applicable values from the original configurations.

Copy link to this section

Webpack configuration

All C3 SDL Applications use the same webpack configuration and in most cases you can use it as is, but some features in your package might require you to modify the configuration objects and in order to provide a scalable and predictable way, the platform provides two hooks for you to extend them that can be defined in a file under ui/c3/config/webpack/extensions.

• extendConfig({original: WebpackConfiguration, moduleId: string, options: Object}) : WebpackConfiguration - Receives a single webpack configuration that can be for a federated module or the main module and is expected to return the configuration with modifications. It is advised to use webpack-merge if you need complex or deep mutations.

  • original - A webpack configuration, it can be for the main bundles or a federated module
  • moduleId - The federated module's identifier. main is for the main bundle that includes the index.html and other bootstraping code, c3ui_core is for the core federated module, which includes shared libraries needed to render the Site.
  • options - An object containing the parameters used for generateConfiguration when the configuration was initialized.

• extendSharedLibraries({original: ModuleFederationPluginOptions.shared, includeCoreLibraries: boolean, includeTestLibraries: boolean }): ModuleFederationPluginOptions.shared - Receives a SharedObject configuration where you can add extra libraries or files to be shared.

  • original - The original shared libraries configuration.
  • includeCoreLibraries - When true, it means the federated module using this configuration is c3ui_core and will include the core libraries, this flag can be used in combination with import so the shared library is only included in c3ui_core (see example).
  • includeTestLibraries - When true, it means the federated module using this configuration is test and is only loaded when running browser tests.

Copy link to this section

Example

const { merge } = require('webpack-merge');
// Just as an example, we are importing a plugin libary and adding it to the configs.
const Plugin = require('newWebpackPlugin');

const extendConfig = ({ original }) => {
  /**
   * Here you can do any manipulation that you need, webpack-merge has advanced methods that allow you to
   * replace plugins, customize the merge algorithm for arrays and objects, please refer to their documentation
   */
  return merge(original, { plugins: [new Plugin()] });
};

const extendSharedLibraries = ({ original, includeCoreLibraries }) => {
  // This is the recommended minimal config:
  const config = {
    eager: true,
    singleton: true,
  };

  /**
   * If you do this, the library will only be included in the core module, removing duplicates from other
   * modules (smaller remoteEntry), but increasing the size and time to load on initial render.
   *
   * Only do this if the library is small or is needed in all pages.
   */
  if (!includeCoreLibraries) {
    config.import = false;
  }

  // You can share a whole library or just a file inside it:
  original['@chakra-ui/react/chakra-provider'] = config;
};

module.exports = { extendConfig, extendSharedLibraries };