Documentation
Contribute
Blog
(opens in a new tab)
(opens in a new tab)
(opens in a new tab)
(opens in a new tab)
English
中文
한국어
API
concepts
configuration
guides
loaders
migrate
plugins
(opens in a new tab)
(opens in a new tab)
Datagrid and Charting for Enterprise Applications
Proud to partner with webpack
(opens in a new tab)
Select webpack version
webpack 5
webpack 4
Print Section
Guides
Getting Started
Quick Start (Minimal Working Example)
Basic Setup
Creating a Bundle
Modules
Using a Configuration
NPM Scripts
Conclusion
Asset Management
Setup
Loading CSS
Loading Images
Loading Fonts
Loading Data
Customize parser of JSON modules
Global Assets
Wrapping up
Next guide
Further Reading
Output Management
Preparation
Making the page an entry point
Cleaning up the /dist folder
The Manifest
Conclusion
Development
Using source maps
Choosing a Development Tool
Using Watch Mode
Using webpack-dev-server
Using webpack-dev-middleware
Adjusting Your Text Editor
Conclusion
Code Splitting
Entry Points
Prevent Duplication
Entry dependencies
SplitChunksPlugin
Dynamic Imports
Understanding ChunkLoadError
Prefetching/Preloading modules
Bundle Analysis
Next Steps
Caching
Output Filenames
Extracting Boilerplate
Module Identifiers
Deploying a new build
Conclusion
Authoring Libraries
Authoring a Library
Webpack Configuration
Adding Source Maps
Expose the Library
Externalize Lodash
External Limitations
Final Steps
Environment Variables
Build Performance
General
Stay Up to Date
Loaders
Bootstrap
Resolving
Dlls
Smaller = Faster
Worker Pool
Persistent cache
Custom plugins/loaders
Progress plugin
Development
Incremental Builds
Compile in Memory
stats.toJson speed
Devtool
Avoid Production Specific Tooling
Minimal Entry Chunk
Avoid Extra Optimization Steps
Output Without Path Info
Node.js Versions 8.9.10-9.11.1
TypeScript Loader
Production
Source Maps
Specific Tooling Issues
Babel
TypeScript
Sass
Content Security Policies
Examples
Enabling CSP
Trusted Types
Development - Vagrant
Configuring the Project
Running the Server
Advanced Usage with nginx
Conclusion
Dependency Management
Dynamic expressions in import() or require()
import.meta.webpackContext
require.context
context module API
Installation
Prerequisites
Local Installation
Global Installation
Bleeding Edge
Hot Module Replacement
Enabling HMR
Via the Node.js API
Gotchas
What an update actually replaces
Self-accepting a module
Cleaning up side effects
Preserving state across an update
Hot-swapping a singleton
When an update can't be applied
HMR on the server
HMR with Stylesheets
Other Code and Frameworks
Tree Shaking
Add a Utility
Mark the file as side-effect-free
Clarifying tree shaking and sideEffects
Full Example: Understanding Side Effects with CSS Files
Package Structure
Package Files Content
What Happens When Consuming This Package?
The Decision Tree for Side Effects
Real-World Impact
Testing Side Effects Configuration
Mark a function call as side-effect-free
Mark a function declaration as side-effect-free
Minify the Output
Common Pitfalls with Side Effects
1. Over-optimistic sideEffects: false
2. Re-exports with Side Effects
3. Forgetting about Nested Dependencies
4. Testing Only in Development Mode
Conclusion
Production
Setup
NPM Scripts
Specify the Mode
Minification
Source Mapping
Minimize CSS
CLI Alternatives
Lazy Loading
Dynamic Import Example
Defer Import Example
Using import.defer() with Context Modules
Frameworks
ECMAScript Modules
Exporting
Importing
Flagging modules as ESM
import.meta in ESM
Top-Level Await
Fully Specified Imports
CommonJS Interop
Dependencies that ship modern syntax
Common Migration Errors
Shimming
Shimming Globals
Granular Shimming
Global Exports
Loading Polyfills
Further Optimizations
Serving a smaller polyfill to modern browsers
Two bundles from one source with layers
Two configurations, when the modern build has to be ESM
Node Built-Ins
Other Utilities
TypeScript
Basic Setup
Ways to Use TypeScript in webpack.config.ts
TypeScript Path Aliases
Migrating from tsconfig-paths-webpack-plugin
Loader
Source Maps
Client types
Using Third Party Libraries
Importing Other Assets
Build Performance
Web Workers
Syntax
Example
Set a public path from a variable
Node.js
Progressive Web Application
We Don't Work Offline Now
Adding Workbox
Registering Our Service Worker
Conclusion
Public Path
Use Cases
Environment Based
On The Fly
Automatic publicPath
Integrations
NPM Scripts
Grunt
Gulp
Mocha
Karma
Asset Modules
Public Path
On The Fly Override
Resource type
Custom output filename
Inlining assets
Custom data URI generator
Source type
URL assets
Asset type
Bytes type
Replacing Inline Loader Syntax
Built-in query suffixes
Disable emitting assets
Advanced entry
Multiple file types per entry
Package exports
General syntax
Alternatives
Conditional syntax
Abbreviation
Notes about ordering
Support
Conditions
Reference syntax
Optimizations
Target environment
Conditions: Preprocessor and runtimes
Conditions: Custom
Common patterns
Target environment independent packages
Providing devtools or production optimizations
Providing different versions depending on target environment
Combining patterns
Guidelines
Modern Web Platform
Web Components with webpack
Problem
Approach
Limitations and future work
Import Maps with webpack
Problem
Approach
Limitations and future work
Progressive Web Apps (PWA) and Service Workers
Problem
Approach
Limitations and future work
Native CSS
Getting Started
What's built-in
Importing CSS
CSS module types
CSS Modules
Supported CSS Modules features
Output modes (exportType)
Custom media and custom selectors
Minification
Vendor prefixes
Resource hints and font preloading
CSS referenced from HTML
Migration Guide
Automated migration (codemod)
At a glance
1. Start from a classic setup
2. Enable native CSS
3. Replace mini-css-extract-plugin
4. Replace css-loader
5. Replace style-loader
6. Keep using preprocessors (Sass, Less, PostCSS)
7. Server-side rendering (node + web)
8. Drop the CSS minimizer and autoprefixer
9. Keep imports unchanged and validate
All options with examples
Parser options
Generator options
Popular examples
CSS Modules with named exports
Extract hashed CSS files for production
Inject <style> tags at runtime (style-loader style)
Import a constructable stylesheet
Import CSS as a string
Global styles + scoped modules side by side
Tailwind CSS (or any PostCSS chain)
Sass with CSS Modules
Group every stylesheet into one file
Theme switching with constructable stylesheets
Development server with hot-reloaded styles
Importing a package's stylesheet
Experimental status & known limitations
Native HTML
Getting Started
What's built-in
Three ways to use HTML
1. HTML as an entry point
2. A generated page for a JavaScript entry
3. HTML imported from JavaScript
What webpack bundles from a page
Skipping a single URL
Customizing which attributes are URLs
Linking pages together
Configuring the generated page
Title, meta and base
Where the tags go
Inlining critical chunks
Favicons and the web app manifest
Subresource Integrity and CSP
Resource hints
Templating
Parsing a fragment
Minification
Hot Module Replacement
Plugin hooks
Migrating from html-loader
At a glance
Before
After
Migrating from html-webpack-plugin
At a glance
Without a template
With a template
Multi-page application
