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
