Webpack

Last updated
Webpack
Developer(s) Tobias Koppers, Sean Larkin, Johannes Ewald, Juho Vepsäläinen, Kees Kluskens, and Webpack contributors
Initial release19 February 2014;9 years ago (2014-02-19) [1]
Stable release
5.77.0 [2]   OOjs UI icon edit-ltr-progressive.svg / 29 March 2023;19 days ago (29 March 2023)
Repository github.com/webpack/webpack
Written in JavaScript
Operating system Linux, macOS, Windows
Platform Node.js
License MIT License [3] [4]
Website webpack.js.org OOjs UI icon edit-ltr-progressive.svg

Webpack is a free and open-source module bundler for JavaScript. [5] [6] [7] [8] 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. [9] Webpack takes modules with dependencies and generates static assets representing those modules. [10]

Contents

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. [11]

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

Related Research Articles

<span class="mw-page-title-main">Server-side scripting</span> Technique used in web development

Server-side scripting is a technique used in web development which involves employing scripts on a web server which produces a response customized for each user's (client's) request to the website. The alternative is for the web server itself to deliver a static web page. Scripts can be written in any of a number of server-side scripting languages that are available. Server-side scripting is distinguished from client-side scripting where embedded scripts, such as JavaScript, are run client-side in a web browser, but both techniques are often used together.

<span class="mw-page-title-main">Ruby on Rails</span> Server-side open source web application framework

Ruby on Rails is a server-side web application framework written in Ruby under the MIT License. Rails is a model–view–controller (MVC) framework, providing default structures for a database, a web service, and web pages. It encourages and facilitates the use of web standards such as JSON or XML for data transfer and HTML, CSS and JavaScript for user interfacing. In addition to MVC, Rails emphasizes the use of other well-known software engineering patterns and paradigms, including convention over configuration (CoC), don't repeat yourself (DRY), and the active record pattern.

<span class="mw-page-title-main">Google Web Toolkit</span> Free Java library

Google Web Toolkit, or GWT Web Toolkit, is an open-source set of tools that allows web developers to create and maintain JavaScript front-end applications in Java. It is licensed under Apache License 2.0.

TypeScript is a free and open source high-level programming language developed and maintained by Microsoft. It is a strict syntactical superset of JavaScript and adds optional static typing to the language. It is designed for the development of large applications and transpiles to JavaScript. As it is a superset of JavaScript, existing JavaScript programs are also valid TypeScript programs.

A single-page application (SPA) is a web application or website that interacts with the user by dynamically rewriting the current web page with new data from the web server, instead of the default method of a web browser loading entire new pages. The goal is faster transitions that make the website feel more like a native app.

<span class="mw-page-title-main">Node.js</span> JavaScript runtime environment

Node.js is a cross-platform, open-source server environment that can run on Windows, Linux, Unix, macOS, and more. Node.js is a back-end JavaScript runtime environment, runs on the V8 JavaScript Engine, and executes JavaScript code outside a web browser.

npm (software) JavaScript package manager

npm is a package manager for the JavaScript programming language maintained by npm, Inc. npm is the default package manager for the JavaScript runtime environment Node.js. It consists of a command line client, also called npm, and an online database of public and paid-for private packages, called the npm registry. The registry is accessed via the client, and the available packages can be browsed and searched via the npm website. The package manager and the registry are managed by npm, Inc.

<span class="mw-page-title-main">Amber Smalltalk</span>

Amber Smalltalk, formerly named Jtalk, is an implementation of the programming language Smalltalk-80, that runs on the JavaScript runtime of a web browser. It is designed to enable client-side development using Smalltalk. The programming environment in Amber is named Helios.

Mojito is an environment agnostic, Model-View-Controller (MVC) web application framework. It was designed by Ric Allinson.

<span class="mw-page-title-main">Asynchronous module definition</span>

Asynchronous module definition (AMD) is a specification for the programming language JavaScript. It defines an application programming interface (API) that defines code modules and their dependencies, and loads them asynchronously if desired. Implementations of AMD provide the following benefits:

<span class="mw-page-title-main">React (software)</span> JavaScript library for building user interfaces

React is a free and open-source front-end JavaScript library for building user interfaces based on components. It is maintained by Meta and a community of individual developers and companies.

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. Grunt was created by Ben Alman and is written in Node.js. It is distributed via npm. As of October 2022, there were more than 6,000 plugins available in the Grunt ecosystem.

<span class="mw-page-title-main">Angular (web framework)</span> Open source web application framework

Angular is a TypeScript-based, free and open-source web application framework led by the Angular Team at Google and by a community of individuals and corporations. Angular is a complete rewrite from the same team that built AngularJS. Angular is a Single Page Application (SPA) Framework which is used for creating Fast Web Applications. It uses concepts of SPA in which UI is delivered in the beginning of application request and later only data is requested which makes SPA applications fast.

<span class="mw-page-title-main">Babel (transcompiler)</span> Backwards compatible JavaScript compiler

Babel is a free and open-source JavaScript transcompiler that is mainly used to convert ECMAScript 2015+ (ES6+) code into backwards-compatible JavaScript code that can be run by older JavaScript engines. It allows web developers to take advantage of the newest features of the language.

Nuxt.js is a free and open source JavaScript library based on Vue.js, Node.js, Vite and Babel.js. Nuxt is inspired by Next.js, which is a framework of similar purpose, based on React.js.

JS++ is a proprietary programming language for web development that extends JavaScript with a sound type system. It includes imperative, object-oriented, functional, and generic programming features.

Next.js is an open-source web development framework created by the private company Vercel providing React-based web applications with server-side rendering and static website generation.

<span class="mw-page-title-main">Deno (software)</span> Secure Javascript and Typescript runtime

Deno is a runtime for JavaScript, TypeScript, and WebAssembly that is based on the V8 JavaScript engine and the Rust programming language. Deno was co-created by Ryan Dahl, who also created Node.js.

<span class="mw-page-title-main">AssemblyScript</span> Programming language, variant of TypeScript that compiles to WebAssembly

AssemblyScript is a TypeScript-based programming language that is optimized for, and statically compiled to, WebAssembly. Resembling ECMAScript and JavaScript, but with static types, the language is developed by the AssemblyScript Project with contributions from the AssemblyScript community.

peacenotwar is a piece of malware/Protestware created by Brandon Nozaki Miller. In March 2022, it was added as a dependency in an update for node-ipc, a common JavaScript dependency.

References

  1. "Release Date of Version 1.0.0" . Retrieved 2020-12-31.
  2. "Release 5.77.0". 29 March 2023. Retrieved 3 April 2023.
  3. "LICENSE file on GitHub" . Retrieved 2020-12-31.
  4. "License field from webpack - npm" . Retrieved 2020-12-31.
  5. "Web Performance Optimization with webpack". Google Inc. Retrieved 16 Oct 2018.
  6. "A Beginner's Guide to webpack 4 and Module Bundling". SitePoint . Retrieved 16 Oct 2018.
  7. "Webpack 4.0 Release Brings Simplified Configuration, WebAssembly Support, and Big Performance Boost". InfoQ. Retrieved 16 Oct 2018.
  8. "High-performance webpack config for front-end delivery". Codementor . Retrieved 16 Oct 2018.
  9. "What is webpack". SurviveJS. Retrieved 16 Oct 2018.
  10. "What is webpack". GitHub. Retrieved 25 Feb 2018.
  11. "Dynamic imports". webpack. Retrieved 6 Jun 2022.