Extend webpack setup from an add-on

Deprecated since version Volto: 18

The project configuration approach as described in this document is deprecated in Volto 18 and will be removed in Volto 19. You should instead follow the add-on approach as described in Volto add-on concepts.

Just like you can extend Razzle's configuration from the project, you can do the same with an add-on. You should provide a razzle.extend.js file in your add-on root folder. The following code example manages two things.

• Add a new webpack plugin, webpack-bundle-analyzer.

• Reconfigure the theme.config alias, to enable a custom Semantic UI theme inside the add-on.

  const analyzerPlugin = {
    name: 'bundle-analyzer',
    options: {
      analyzerHost: '0.0.0.0',
      analyzerMode: 'static',
      generateStatsFile: true,
      statsFilename: 'stats.json',
      reportFilename: 'reports.html',
      openAnalyzer: false,
    },
  };
  
  const plugins = (defaultPlugins) => {
    return defaultPlugins.concat([analyzerPlugin]);
  };
  const modify = (config, { target, dev }, webpack) => {
    const themeConfigPath = `${__dirname}/theme/theme.config`;
    config.resolve.alias['../../theme.config$'] = themeConfigPath;
  
    return config;
  };
  
  module.exports = {
    plugins,
    modify,
  };
  

See also

volto-searchlib's razzle.extend.js file for an example of how to include additional paths for the Babel configuration, and how to add additional webpack name aliases.