Bundler — What It Is, Types, and How It Works

What Is a Bundler?

Bundler (module bundler) is a command-line tool that takes an entry point — the main application file — and recursively traverses all its dependencies, building a module graph. On output, the bundler generates one or more files that can be included in an HTML page or run in a mobile application.

Why a Bundler Is Needed in Modern Development

For a long time, browsers did not support a JavaScript module system at the platform level. Bundler solved this problem by turning hundreds of import and require statements into a single file. Today, even with native ES module support in browsers, bundlers perform additional tasks: transpilation of JSX and TypeScript, minification of code, code splitting for lazy loading, and hot module replacement (HMR) for faster development.

In mobile development, React Native uses Metro as its default bundler, while Flutter uses its own build system based on Dart. The choice of bundler directly affects development speed, application size, and runtime performance.

How Does Bundling Work?

Bundling goes through several stages: parsing input files, building a dependency graph, transforming modules, and generating output files. At each stage, the bundler applies loaders to transform source code and plugins for optimization.

Parsing and Dependency Graph Stage

The bundler starts from the entry point, reads the file, and builds an AST (Abstract Syntax Tree). From the AST, all import and require statements are extracted. For each import found, the bundler repeats the process recursively until all dependencies are collected into a single graph.

// Simplified bundler implementation
const fs = require('fs');
const path = require('path');

function buildGraph(entry) {
  const content = fs.readFileSync(entry, 'utf-8');
  const imports = content.match(/require\(['"](.+?)['"]\)/g);
  const modulePath = path.resolve(path.dirname(entry), imports[0]);
  return { entry, content, deps: [buildGraph(modulePath)] };
}

After building the graph, the bundler applies loaders — transformations that convert files into JavaScript: TypeScript → JS, SCSS → CSS, JSX → JSX functions. Then plugins perform additional transformations: minification, image inlining, service worker generation.

Main Types of Bundlers

Bundlers fall into three generations: classic, specialized, and next-generation based on ES modules. Each type has its own architecture and area of application.

Classic Bundlers

Webpack is the most widespread bundler with a huge ecosystem. Its main advantage is flexibility: thousands of loaders and plugins cover virtually any build scenario. Parcel offers a zero-config approach, automatically detecting the necessary transformations based on file extensions. Both bundlers support code splitting and HMR.

Specialized Bundlers

Metro was created specifically for React Native and works only with JavaScript and TypeScript. Its architecture is optimized for mobile development: support for inline requires, asynchronous module loading, and integration with the Hermes engine. Rollup is focused on libraries and npm packages, generating clean ES module output without unnecessary wrappers.

Webpack vs Metro vs Vite

The choice of bundler depends on the platform and project requirements. Webpack is versatile but requires detailed configuration. Metro is the only option for React Native. Vite provides the fastest development experience thanks to native ES modules.

Vite uses esbuild for pre-bundling dependencies and Rollup for production builds, providing 5–10x speed improvement over Webpack in development mode. Metro does not support web targets but provides seamless integration with the React Native bridge and Turbo Modules.

Configuring a Bundler in a Project

Configuration of the bundler determines how different file types are processed, where the build is generated, and which optimizations are applied. A typical configuration file includes the entry point, module rules, plugins, and output settings.

Example Webpack Configuration for a React Native Web Project

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash].js',
    clean: true,
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        exclude: /node_modules/,
        use: { loader: 'babel-loader', options: { presets: ['@babel/preset-react'] } },
      },
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
    ],
  },
  plugins: [new HtmlWebpackPlugin({ template: './public/index.html' })],
  devServer: { port: 3000, hot: true },
};

Metro uses separate metro.config.js and babel.config.js files for configuration. Unlike Webpack, Metro's configuration is significantly simpler since the bundler is specialized for React Native and does not require configuring loaders for styles or images.

Common Build Errors

Even experienced developers encounter bundling errors. Duplicate module is one of the most common problems, where the same dependency ends up in the bundle multiple times due to version incompatibility in package.json. Module not found occurs when the import path is incorrect or the package is not installed.

Metro-Specific Errors

Metro is limited by bundle sizes for mobile devices. When the limit of 2–5 MB is exceeded, the Unable to resolve module error occurs due to insufficient memory on the device. The solution is to use inline requires and RAM bundles for lazy loading of modules. Metro is also sensitive to symlinks, so monorepos require additional watchFolders configuration.

For Webpack, a typical issue is Module parse failed, which occurs when a file has an unexpected format or the necessary loader is missing. Checking the file extension and adding the appropriate rule in module.rules solves the problem. Using source-map-explorer helps find duplicate modules and redundant dependencies in the final bundle.

Optimizing Configuration for Faster Builds

Slow builds are one of the main problems when working with bundlers. To speed things up, use persistent caching, which saves module transformation results between runs. Webpack 5 supports file caching via cache: { type: 'filesystem' }, Vite uses esbuild for pre-bundling, and Metro relies on in-memory module caching. Additionally, specify exclude for node_modules in loaders to avoid re-processing already built packages.

Choosing a Code Splitting Strategy

Code splitting divides the bundle into chunks that are loaded on demand. Different bundlers implement this strategy differently. Webpack supports dynamic imports import(), creating separate chunks for each module. Metro uses inline requires for deferred loading. Vite automatically splits vendor chunks and dynamic imports without additional configuration. The choice of strategy depends on project requirements: for mobile applications, smaller initial bundles with lazy loading are preferred.

For proper code splitting in React Native, additional configuration is required: Metro must be configured for async chunks via inlineRequires. In Webpack and Vite, code splitting works out of the box when using the dynamic import() syntax, which automatically creates split points. For maximum efficiency, combine code splitting with preload hints via <link rel="preload"> for critical chunks.