An illustration of our modular webpack configuration setup under embroider

addon-a__ember-cli-build.js

const EmberAddon = require('ember-cli/lib/broccoli/ember-addon');
const { Webpack } = require('@embroider/webpack');

module.exports = function (defaults) {
  let app = new EmberAddon(defaults, {});

  return require('@embroider/compat').compatBuild(app, Webpack, {
    packagerOptions: {
      webpackConfig: require('./webpack.config'),
    },
  });
};

addon-a__webpack.config.js

//
// This configuration is needed for any app that consumes this addon, since
// this addon contributes `some-lib` to the build, and at runtime `some-lib`
// relies on some SVG assets being present, which requires some webpack
// configuration. So we define a configuration that should be merged with the
// rest of the webpack configuration anytime an addon/app includes this addon.
//
module.exports = {
  module: {
    rules: [
      // `some-lib` provides SVG assets that we want to include in the build
      // as-is, so use `raw-loader`
      {
        test: /\.svg$/,
        include: require.resolve('some-lib'),
        use: ['raw-loader'],
      },
    ],
  },
  resolveLoader: {
    alias: {
      // make sure our `raw-loader` resolves in consuming apps, because
      // if the consuming app doesn't depend on it, it might not be resolvable
      // by the consuming app's `webpack` when it's building
      'raw-loader': require.resolve('raw-loader'),
    },
  },
};

addon-b__ember-cli-build.js

const EmberAddon = require('ember-cli/lib/broccoli/ember-addon');
const { Webpack } = require('@embroider/webpack');

module.exports = function (defaults) {
  let app = new EmberAddon(defaults, {});

  return require('@embroider/compat').compatBuild(app, Webpack, {
    packagerOptions: require('./webpack.config'),
  });
};

addon-b__webpack.config.js

const path = require('path');

const emberFileUploadMiragePath = path.join(
  path.dirname(require.resolve('ember-file-upload')),
  'mirage'
);

//
// This addon includes `ember-file-upload` as a `dependency`, so any app/addon
// that includes this addon and uses embroider will need to have this workaround
// in place to be build-able.
//
module.exports = {
  resolve: {
    // Needed until
    // https://github.com/adopted-ember-addons/ember-file-upload/issues/425
    // is fixed
    alias: {
      [emberFileUploadMiragePath]: false,
    },
  },
};

app__ember-cli-build.js

const EmberApp = require('ember-cli/lib/broccoli/ember-app');
const { Webpack } = require('@embroider/webpack');
const { merge } = require('webpack-merge');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

module.exports = function (defaults) {
  let app = new EmberApp(defaults, {});

  return require('@embroider/compat').compatBuild(app, Webpack, {
    packagerOptions: {
      // Include the webpack configs for our dependencies. Our "direct" webpack
      // config (i.e. the part that doesn't come from addons) is specified
      // inline because we're an app, so it doesn't need to be reusable,
      // although it could be put in `./webpack.config.js` for the sake of
      // consistency with addons.
      webpackConfig: merge(
        {},
        require('addon-a/webpack.config'),
        require('addon-b/webpack.config'),
        {
          plugins: [
            new BundleAnalyzerPlugin({
              analyzerMode: process.env.WEBPACK_BUNDLE_ANALYZER
                ? 'static'
                : 'disabled',
            }),
          ],
          devtool:
            process.env.EMBER_ENV === 'production' ? 'source-map' : 'eval',
        }
      ),
    },
  });
};