Webpack is a static module bundler for JavaScript applications that processes source files and transforms them into optimized bundles for browsers. Developed since 2012, Webpack remains one of the most widely adopted build tools for modern web development, offering deep configurability for transforming, bundling, and optimizing application assets including JavaScript, CSS, images, and fonts. Understanding Webpack's core concepts—entry, output, loaders, plugins, and modes—is essential because they form a composable system that lets you control every aspect of your build process, from development speed to production optimization. With Webpack 5's persistent filesystem cache, Module Federation 2.0, and native CSS support on the horizon in Webpack 6, the ecosystem continues to evolve toward faster builds and cross-application code sharing.
What This Cheat Sheet Covers
This topic spans 20 focused tables and 189 indexed concepts. Below is a complete table-by-table outline of this topic, spanning foundational concepts through advanced details.
Table 1: Core Configuration Properties
| Property | Example | Description |
|---|---|---|
entry: './src/index.js' | • Defines the starting point where Webpack begins building the dependency graph • can be single, multiple, or dynamic. | |
output: { path: __dirname + '/dist', filename: 'bundle.js' } | • Specifies where compiled files are written and how they're named • controls bundle output location and naming patterns. | |
mode: 'production' | Sets built-in optimizations: production (minification, tree shaking), development (debugging), or none (no defaults). | |
module: { rules: [...] } | Defines loader rules that tell Webpack how to transform each file type it encounters. | |
plugins: [new HtmlWebpackPlugin()] | Array of plugin instances that extend Webpack's functionality beyond what loaders can do. | |
resolve: { extensions: ['.js', '.json'] } | Configures module resolution: extensions, aliases, and paths Webpack uses to find imports. | |
devtool: 'source-map' | • Controls source map generation for debugging • balances build speed vs. debugging detail. | |
target: 'node' | Specifies the runtime environment: web, node, electron-main, electron-renderer determine module loading strategy. |