webpack

Create a single output file from an entry point file

$ webpack [app.js] [bundle.js]

$ webpack [app.js] [bundle.js] --module-bind '[css=css]'

$ webpack --config [webpack.config.js] --progress

$ webpack --watch [app.js] [bundle.js]

webpack [entry] [options]
webpack serve [options]
webpack watch [options]

--config
    Specify a webpack configuration file. Defaults to 'webpack.config.js'.

--mode
    Enable webpack's built-in optimizations for a given environment (e.g., 'development', 'production', 'none').

--watch, -w
    Watch files for changes and recompile automatically on modification.

--json, -j
    Print webpack statistics in JSON format, useful for programmatic analysis.

--stats
    Preset for the stat output (e.g., 'minimal', 'normal', 'verbose', 'errors-only').

--serve
    Runs the webpack-dev-server, providing a development server with live reloading.

--env
    Pass environment variables to the webpack configuration function.

--hot
    Enables Hot Module Replacement (HMR) for faster development cycles.

--progress
    Print compilation progress to the console during the build process.

--profile
    Print compilation profile data, useful for analyzing build performance.

webpack is an open-source JavaScript module bundler. Its primary purpose is to bundle JavaScript files for usage in a browser, but it can also transform, bundle, or package nearly any resource or asset. It takes modules with dependencies and generates static assets representing those modules, enabling efficient deployment. webpack is highly configurable and extensible through loaders (for pre-processing files) and plugins (for custom build steps). It's widely used in modern front-end development to optimize assets, implement code splitting, enable Hot Module Replacement (HMR), and perform various build optimizations, crucial for large-scale web applications.

Requires Node.js and a package manager (npm or yarn) to be installed.
The extensive configuration options can lead to a steep learning curve for newcomers.
Build performance is highly dependent on configuration and project complexity.

Loaders transform files (e.g., TypeScript to JavaScript, SASS to CSS) before they are added to the bundle. Plugins are more powerful, allowing customization of webpack's compilation process for optimization, asset management, and more.

webpack primarily relies on a JavaScript configuration file, typically named webpack.config.js, where all build settings, entry points, output paths, loaders, and plugins are defined.

webpack was originally created by Tobias Koppers and first released in 2012. It gained significant traction around 2015-2016, becoming a cornerstone of modern JavaScript development, particularly with the rise of single-page applications and frameworks like React. Subsequent major versions (webpack 2, 3, 4, 5) introduced significant improvements, including performance enhancements, tree-shaking, and zero-configuration defaults (webpack 4), solidifying its position as a dominant build tool for web assets.

npm(1), yarn(1), rollup(1), esbuild(1)