Monorepos and workspaces

Monorepo bundling

Monorepos contain multiple packages in a single repo. Webpack must resolve packages from workspace roots. Configure resolve.modules to include workspace package locations. Use symlinks or alias resolution for local package imports. This enables shared components and libraries across your monorepo.

Configure monorepo resolution

Set up Webpack to resolve packages from multiple workspace locations.

module.exports = {
  resolve: {
    modules: [
      'node_modules',
      path.resolve(__dirname, '../packages'),
      path.resolve(__dirname, '../shared')
    ],
    alias: {
      '@company/ui': path.resolve(__dirname, '../packages/ui'),
      '@company/core': path.resolve(__dirname, '../packages/core')
    }
  }
};

Output:

Resolves local packages as if they're installed

Shared dependencies matter

In monorepos, avoid bundling the same dependency multiple times. Use externals or webpack-node-externals to exclude node_modules from bundling. For web apps, use common chunks configuration to share dependencies across packages.

Quick check

Quick check: Why configure resolve.modules for monorepos?

• To speed up bundling process.
• To compress shared dependencies.
• To disable symlinks entirely.
• To find packages in workspace locations besides node_modules.