18. Extend Webpack setup from an add-on with razzle.extend.js

Just like you can extend Razzle's configuration from the project, you can do so with an addon, as well. You should provide a razzle.extend.js file in your addon root folder. Here's an example of such file, where we achieve two things:

• we add a new webpack plugin, the bundle-analyzer

• we reconfigure the theme.config alias, to enable a custom Semantic theme inside the addon:

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

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