Webpack is a
free and open-source
Free and open-source software (FOSS) is software available under a Software license, license that grants users the right to use, modify, and distribute the software modified or not to everyone free of charge. FOSS is an inclusive umbrella term ...
module bundler for
JavaScript
JavaScript (), often abbreviated as JS, is a programming language and core technology of the World Wide Web, alongside HTML and CSS. Ninety-nine percent of websites use JavaScript on the client side for webpage behavior.
Web browsers have ...
. It is made primarily for JavaScript, but it can transform front-end assets such as HTML, CSS, and images if the corresponding loaders are included. Webpack takes modules with dependencies and generates static assets representing those modules.
Webpack takes the dependencies and generates a
dependency graph
In mathematics, computer science and digital electronics, a dependency graph is a directed graph representing dependencies of several objects towards each other. It is possible to derive an evaluation order or the absence of an evaluation order th ...
allowing web developers to use a modular approach for their web application development purposes. It can be used from the command line or can be configured using a configuration file which is named ''webpack.config.js''. This file defines rules, plugins, etc., for a project. (Webpack is highly extensible via rules which allow developers to write custom tasks that they want to perform when bundling files together.)
Node.js is required to use Webpack.
Webpack provides
code on demand
In distributed computing, code on demand is any technology that sends executable software code from a server computer to a client computer upon request from the client's software. Some well-known examples of the code on demand paradigm on the web a ...
using the moniker ''code splitting''. Two similar techniques are supported by Webpack when it comes to dynamic code splitting. The first and recommended approach is to use the ''import()'' syntax that conforms to the
ECMAScript
ECMAScript (; ES) is a standard for scripting languages, including JavaScript, JScript, and ActionScript. It is best known as a JavaScript standard intended to ensure the interoperability of web pages across different web browsers. It is stan ...
proposal for dynamic imports. The legacy, Webpack-specific approach is to use ''require.ensure''.
Webpack development server
Webpack also provides a built-in development server, ''webpack-dev-server'', that can be used as an HTTP server for serving files while developing. It also provides the capability to use hot module replacement (HMR), which updates code on a webpage without requiring the developer to reload the page.
See also
*
Browserify
*
Vite
*
Grunt (software)
Grunt is a JavaScript task runner, a tool used to automatically perform frequent tasks such as minification, compilation, unit testing, and linting. It uses a command-line interface to run custom tasks defined in a file (known as a Gruntfile ...
*
Gulp.js
gulp is an open-source JavaScript toolkit, used as a streaming build system (similar to a more package-focused Make) in front-end web development.
It is a task runner built on Node.js and npm, used for automation of time-consuming and repet ...
*
JavaScript framework
A web framework (WF) or web application framework (WAF) is a software framework that is designed to support the development of web applications including web services, web resources, and web APIs. Web frameworks provide a standard way to build and ...
References
External links
*
{{JavaScript
2012 software
JavaScript programming tools
Software using the MIT license