Webpack

{{short description|Open-source JavaScript module bundler}} {{Infobox software | name = webpack | logo = Webpack.svg | logo caption = | logo alt = | logo size = | collapsible = | screenshot =  | screenshot size = | screenshot alt = | caption = | other_names = | author = | developer = Tobias Koppers, Sean Larkin, Johannes Ewald, Juho Vepsäläinen, Kees Kluskens, Even Stensberg and webpack contributors | released = {{Start date and age|2014|02|19|df=yes}}<ref>{{cite web | url=https://libraries.io/npm/webpack/versions | access-date=2020-12-31 | title=Release Date of Version 1.0.0}}</ref> | ver layout = simple | discontinued = | latest release version = {{Wikidata|property|edit|reference|P348}} | latest release date = {{Start date and age|{{Wikidata|qualifier|P348|P577}}|df=yes}} | latest preview version = | latest preview date = | repo = {{URL|https://github.com/webpack/webpack}} | qid = | programming language = JavaScript  | middleware = | tools = | engine = | operating system = Linux, macOS, Windows  | platform = Node.js  | included with = | replaces = | replaced_by = | service_name = | standard = | language = | language count =  | language footnote = | genre = | license = MIT License<ref>{{cite web | url=https://github.com/webpack/webpack/blob/main/LICENSE | title=LICENSE file on GitHub | access-date=2020-12-31}}</ref><ref>{{cite web | url=https://www.npmjs.com/package/webpack | title=License field from webpack - npm | access-date=2020-12-31}}</ref> | website = {{Official URL}} | AsOf = }}

'''webpack''' is a free and open-source module bundler for JavaScript.<ref>{{Cite web|url=https://developers.google.com/web/fundamentals/performance/webpack/|title=Web Performance Optimization with webpack|publisher=Google Inc.|access-date=16 Oct 2018}}</ref><ref>{{Cite web|url=https://www.sitepoint.com/beginners-guide-webpack-module-bundling/|title=A Beginner's Guide to webpack 4 and Module Bundling|publisher=SitePoint|access-date=16 Oct 2018}}</ref><ref>{{Cite news|url=https://www.infoq.com/news/2018/02/webpack-4-0-brings-simplified|title=Webpack 4.0 Release Brings Simplified Configuration, WebAssembly Support, and Big Performance Boost|publisher=InfoQ|access-date=16 Oct 2018}}</ref><ref>{{Cite web|url=https://www.codementor.io/drewpowers/high-performance-webpack-config-for-front-end-delivery-90sqic1qa|title=High-performance webpack config for front-end delivery|publisher=Codementor|access-date=16 Oct 2018|archive-date=27 February 2021|archive-url=https://web.archive.org/web/20210227190625/https://www.codementor.io/drewpowers/high-performance-webpack-config-for-front-end-delivery-90sqic1qa|url-status=dead}}</ref> 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.<ref>{{Cite web|url=https://survivejs.com/webpack/what-is-webpack/|title=What is webpack|publisher=SurviveJS|access-date=16 Oct 2018}}</ref> webpack takes modules with dependencies and generates static assets representing those modules.<ref>{{cite web |url=https://github.com/webpack/docs/wiki/what-is-webpack |title=What is webpack |publisher=GitHub |access-date=25 Feb 2018}}</ref>

webpack takes the dependencies and generates a dependency graph 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 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 proposal for dynamic imports. The legacy, webpack-specific approach is to use ''require.ensure''.<ref>{{cite web |url=https://webpack.js.org/guides/code-splitting/#dynamic-imports |title=Dynamic imports |publisher=webpack |access-date=6 Jun 2022}}</ref>

== 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 == {{Portal|Free and open-source software}} * Browserify * Vite * Grunt (software) * Gulp.js * JavaScript framework

== References == {{Reflist|30em}}

== External links == * {{Official website}}

Category:2012 software Category:Free software programmed in JavaScript Category:JavaScript programming tools Category:Software using the MIT license