Webpack

Definitions

1. Webpack is a module bundler for JavaScript applications that takes all of a project's files, dependencies, and assets and bundles them into optimized output files for the browser. In modern frontend development, code is typically written across many modules and files, using import statements and npm packages. Webpack resolves these dependencies, creates a dependency graph, and outputs one or more bundles that can be loaded efficiently by the browser. Loaders allow Webpack to process non-JavaScript files like CSS, images, TypeScript, and Sass, transforming them as part of the build pipeline. Plugins extend Webpack's capabilities with features like code splitting (loading parts of the app on demand), tree shaking (removing unused code), hot module replacement (updating code in the browser without a full reload), and minification. Configuration is done through a webpack.config.js file. While newer bundlers like Vite, esbuild, and Turbopack have emerged as faster alternatives, Webpack remains widely used in production applications and is a core part of many build toolchains.

   In plain English: A tool that takes all the different files in a web project — JavaScript, CSS, images — and bundles them together into optimized packages that browsers can load efficiently.

Related Terms

• Transpiler
• Hot Reload
• Immutable
• Vite
• code splitting
• tree shaking
• hot module replacement
• Jest
• Scroll Event
• Template Literal
• Var
• Vue
• Vue.js
• Yarn
• Turbo Repo
• Browser Runtime