Skip to main content
The entry point tells webpack where to start building the dependency graph. The context option sets the base directory for resolving entry points and loaders.

​
Entry

The entry configuration determines which module(s) webpack should use to begin building the dependency graph.
​
entry
string | string[] | object | function
The entry point(s) for the application.

​
Single Entry (String)

Simplest form - a single entry point:
webpack.config.js
module.exports = {
  entry: './src/index.js'
};

​
Multiple Modules (Array)

Combine multiple modules into a single chunk:
webpack.config.js
module.exports = {
  entry: ['./src/polyfills.js', './src/index.js']
};

​
Multiple Entry Points (Object)

Create separate bundles for different entry points:
webpack.config.js
module.exports = {
  entry: {
    app: './src/app.js',
    admin: './src/admin.js',
    vendor: './src/vendor.js'
  }
};

​
Entry Descriptor

Use objects to configure entry points with additional options:
webpack.config.js
module.exports = {
  entry: {
    app: {
      import: './src/app.js',
      filename: 'pages/[name].js',
      dependOn: 'shared',
      chunkLoading: 'jsonp',
      asyncChunks: true,
      layer: 'client'
    },
    shared: ['react', 'react-dom']
  }
};

​
Entry Descriptor Options

​
import
string | string[]
required
Module(s) loaded on startup. The last one is exported.
import: './src/index.js'
// or
import: ['./src/polyfills.js', './src/index.js']
​
filename
string | function
Specifies the name of each output file for this entry.
filename: 'bundle-[name].js'
​
dependOn
string | string[]
Entry points that must be loaded before this entry.
dependOn: 'vendor'
// or
dependOn: ['vendor', 'shared']
Cannot be used together with runtime.
​
runtime
string | false
Name of the runtime chunk. Creates a new runtime chunk or uses an existing entry as runtime.
runtime: 'runtime'
Set to false to avoid a new runtime chunk.
​
chunkLoading
string | false
Method of loading chunks for this entry point.
chunkLoading: 'jsonp' // or 'import', 'require', 'async-node'
Options: 'jsonp', 'import', 'require', 'async-node', 'import-scripts', false
​
asyncChunks
boolean
Enable/disable creating async chunks that are loaded on demand.
asyncChunks: true
Default: true
​
wasmLoading
string | false
Method of loading WebAssembly modules.
wasmLoading: 'fetch' // or 'async-node'
​
publicPath
string | function
Public path for this entry’s assets when referenced in a browser.
publicPath: 'https://cdn.example.com/assets/'
​
baseUri
string
Base URI for this entry.
baseUri: 'https://example.com/'
​
layer
string
Layer in which modules of this entry point are placed.
layer: 'client'
​
library
object
Options for building this entry as a library. See Library Output for details.
library: {
  type: 'umd',
  name: 'MyLibrary'
}

​
Dynamic Entry

Define entry points dynamically using a function:
webpack.config.js
module.exports = {
  entry: () => './src/index.js'
};
Return a promise for async entry configuration:
webpack.config.js
module.exports = {
  entry: () => new Promise((resolve) => {
    setTimeout(() => {
      resolve('./src/index.js');
    }, 1000);
  })
};
Dynamic multi-entry:
webpack.config.js
module.exports = {
  entry: async () => {
    const entries = await getEntryPointsFromDB();
    return {
      app: entries.app,
      admin: entries.admin
    };
  }
};

​
Context

​
context
string
The base directory (absolute path) for resolving entry points and loaders.
const path = require('path');

module.exports = {
  context: path.resolve(__dirname, 'src'),
  entry: './index.js' // resolves to <context>/index.js
};
Default: process.cwd() (current working directory)
Must be an absolute path. Use path.resolve() to ensure this.

​
Common Patterns

​
Single Page Application

webpack.config.js
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js'
  }
};

​
Multi-Page Application

webpack.config.js
module.exports = {
  entry: {
    home: './src/pages/home.js',
    about: './src/pages/about.js',
    contact: './src/pages/contact.js'
  },
  output: {
    filename: '[name].bundle.js'
  }
};

​
Vendor Code Splitting

webpack.config.js
module.exports = {
  entry: {
    app: './src/app.js',
    vendor: './src/vendor.js'
  },
  output: {
    filename: '[name].bundle.js'
  }
};

​
Code Splitting with Shared Dependencies

webpack.config.js
module.exports = {
  entry: {
    home: {
      import: './src/pages/home.js',
      dependOn: 'shared'
    },
    about: {
      import: './src/pages/about.js',
      dependOn: 'shared'
    },
    shared: ['react', 'react-dom', 'lodash']
  }
};

​
Separate Runtime Chunk

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