Extend webpack setup from an add-on

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,
};