Webpack Module Bundler

Webpack is a free and open-source module bundler for JavaScript applications that transforms, bundles, and optimizes front-end assets (JavaScript, CSS, images, fonts) for production. Created by Tobias Koppers in 2012, Webpack became the dominant bundler for web applications during the 2010s, used by millions of projects including Create React App, Next.js (pre-12), and Angular CLI. Key features: module bundling: Webpack takes modules with dependencies and generates static assets (bundles) that represent those modules. It processes JavaScript, TypeScript, CSS, Sass, Less, images, fonts, and other file types through loaders. Entry and output: webpack starts from one or more entry points, builds a dependency graph by following import/require statements, and outputs one or more bundles to the output directory. Loaders: transform non-JavaScript files into modules. Babel-loader transpiles ES6+/JSX to compatible JavaScript. CSS-loader interprets import statements in CSS. Style-loader injects CSS into the DOM. File-loader and url-loader handle images and fonts. PostCSS-loader, Sass-loader, Less-loader. Plugins: perform a wider range of tasks including bundle optimization, asset management, and environment variable injection. HtmlWebpackPlugin generates HTML files, DefinePlugin injects compile-time constants, MiniCssExtractPlugin extracts CSS, SplitChunksPlugin splits bundles. Code splitting: split code into smaller bundles that can be loaded on demand, reducing initial load time. Dynamic imports and SplitChunksPlugin. Tree shaking: eliminates unused exports from bundles, reducing bundle size. HMR (Hot Module Replacement): updates modules in the browser without a full page reload during development. DevServer: local development server with HMR. Configuration via webpack.config.js. Mode-based optimization (development, production). JavaScript. MIT.