---
myst:
  html_meta:
    "description": "Extend Webpack setup from an add-on with `razzle.extend.js`"
    "property=og:description": "Extend Webpack setup from an add-on with `razzle.extend.js`"
    "property=og:title": "Extend Webpack setup from an add-on with `razzle.extend.js`"
    "keywords": "Volto, Plone, Webpack, Volto add-on"
---

# 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. An example of such file where the theme.config alias is
changed, to enable a custom Semantic theme inside the addon:

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