Entry Points

Learn how webpack uses entry points to start building the dependency graph

Entry Points

The entry point is where webpack starts building the internal dependency graph. From the entry point, webpack determines which modules and libraries the entry depends on (directly and indirectly).

Overview

Every webpack build starts from one or more entry points. Entry points tell webpack where to start and follow the graph of dependencies to know what to bundle.

Configuration

Single Entry Syntax

The simplest entry configuration is a single string:

module.exports = {
  entry: './src/index.js'
};

This is shorthand for:

module.exports = {
  entry: {
    main: './src/index.js'
  }
};

Object Syntax

For multiple entry points, use object syntax:

module.exports = {
  entry: {
    app: './src/app.js',
    admin: './src/admin.js'
  }
};

This creates two separate dependency graphs, one for each entry point.

Array Syntax

Pass an array of file paths to create a “multi-main entry”:

module.exports = {
  entry: {
    app: ['./src/polyfills.js', './src/app.js']
  }
};

This injects multiple dependent files together and graphs their dependencies into one chunk.

Entry Descriptor

For advanced configuration, use entry descriptor objects:

module.exports = {
  entry: {
    app: {
      import: './src/app.js',
      filename: 'pages/[name].js',
      dependOn: 'shared',
      chunkLoading: 'jsonp',
      asyncChunks: true,
      layer: 'app'
    },
    shared: ['react', 'react-dom', 'lodash']
  }
};

Entry Options

Entry descriptors provide fine-grained control over how entry chunks are created and loaded.

Option	Description
import	Module(s) that are loaded on startup
filename	Specifies the name of each output file on disk
dependOn	Entry points that the current entry depends on
chunkLoading	Method of loading chunks (e.g., ‘jsonp’, ‘import-scripts’)
asyncChunks	Create async chunks for this entry
layer	Specify the layer for this entry
runtime	Name of the runtime chunk

How Entry Points Work

Internally, webpack uses the EntryPlugin to process entry points:

// From EntryPlugin.js
class EntryPlugin {
  constructor(context, entry, options) {
    this.context = context;
    this.entry = entry;
    this.options = options;
  }

  apply(compiler) {
    compiler.hooks.compilation.tap(
      'EntryPlugin',
      (compilation, { normalModuleFactory }) => {
        compilation.dependencyFactories.set(
          EntryDependency,
          normalModuleFactory
        );
      }
    );

    const { entry, options, context } = this;
    const dep = EntryPlugin.createDependency(entry, options);

    compiler.hooks.make.tapAsync('EntryPlugin', (compilation, callback) => {
      compilation.addEntry(context, dep, options, (err) => {
        callback(err);
      });
    });
  }
}

The compilation.addEntry method starts the dependency resolution process, creating an entry point in the module graph.

Dynamic Entry

Entry points can be functions that return a configuration:

module.exports = {
  entry: () => './src/app.js'
};

Or a Promise:

module.exports = {
  entry: () => new Promise((resolve) => {
    setTimeout(() => {
      resolve('./src/app.js');
    }, 1000);
  })
};

Multiple Entry Points

When using multiple entry points, consider these patterns:

Separate App and Vendor Entries

module.exports = {
  entry: {
    app: './src/app.js',
    vendor: ['react', 'react-dom', 'lodash']
  }
};

Multi-Page Application

module.exports = {
  entry: {
    pageOne: './src/pageOne/index.js',
    pageTwo: './src/pageTwo/index.js',
    pageThree: './src/pageThree/index.js'
  }
};

Each entry point creates a separate dependency graph. Shared modules will be duplicated unless you configure code splitting.

Best Practices

1. Use descriptive names - Entry point names become part of the output filename
2. Split by page - For multi-page apps, create one entry per page
3. Share common code - Use dependOn or optimization.splitChunks to share code between entries
4. Consider runtime - Specify a shared runtime chunk to avoid duplication

Related Concepts

• Output - Configure where webpack emits bundles
• Dependency Graph - How webpack builds the module graph
• Loaders - Transform files as they’re added to the dependency graph