Datagrid and Charting for Enterprise Applications
webpack
Proud to partner with webpack

Printable

webpack

Install Webpack

npm install --save-dev webpack webpack-cli

Write Your Code

src/index.js

import bar from "./bar.js";

bar();

src/bar.js

export default function bar() {
  //
}

Bundle It

Start without a configuration file, or provide a custom webpack.config.js:

import path from "node:path";
import { fileURLToPath } from "node:url";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
};

Prefer a video walkthrough? Without config

page.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    ...
  </head>
  <body>
    ...
    <script src="dist/bundle.js"></script>
  </body>
</html>

Then run webpack on the command-line to create bundle.js.

Awesome, isn't it? Let's dive in!

Get Started quickly in our Guides section, or dig into the Concepts section for more high-level information on the core notions behind webpack.

Comparison

Webpack is not the only module bundler out there. If you are choosing between using webpack or any of the bundlers below, here is a feature-by-feature comparison on how webpack fares against the current competition.

Featurewebpack/webpackjrburke/requirejssubstack/node-browserifyjspm/jspm-clirollup/rollupbrunch/brunch
Additional chunks are loaded on demandyesyesnoSystem.importnono
AMD defineyesyesdeamdifyyesrollup-plugin-amdyes
AMD requireyesyesnoyesnoyes
AMD require loads on demandyeswith manual configurationnoyesnono
CommonJS exportsyesonly wrapping in defineyesyescommonjs-pluginyes
CommonJS requireyesonly wrapping in defineyesyescommonjs-pluginyes
CommonJS require.resolveyesnononono-
Concat in require require("./fi" + "le")yesno♦nonono-
Debugging supportSourceUrl, SourceMapsnot requiredSourceMapsSourceUrl, SourceMapsSourceUrl, SourceMapsSourceMaps
Dependencies19MB / 127 packages11MB / 118 packages1.2MB / 1 package26MB / 131 packages?MB / 3 packages-
ES2015 import/exportyes (webpack 2)nonoyesyesyes, via es6 module transpiler
Expressions in require (guided) require("./templates/" + template)yes (all files matching included)no♦nononono
Expressions in require (free) require(moduleName)with manual configurationno♦nonono-
Generate a single bundleyesyes♦yesyesyesyes
Indirect require var r = require; r("./file")yesno♦nonono-
Load each file separatenoyesnoyesnono
Mangle path namesyesnopartialyesnot required (path names are not included in the bundle)no
MinimizingTerseruglify, closure compileruglifyifyyesuglify-pluginUglifyJS-brunch
Multi pages build with common bundlewith manual configurationyeswith manual configurationwith bundle arithmeticnono
Multiple bundlesyeswith manual configurationwith manual configurationyesnoyes
Node.js built-in libs require("path")yesnoyesyesnode-resolve-plugin-
Other Node.js stuffprocess, __dir/filename, global-process, __dir/filename, globalprocess, __dir/filename, global for cjsglobal (commonjs-plugin)-
Pluginsyesyesyesyesyesyes
Preprocessingloadersloaderstransformsplugin translateplugin transformscompilers, optimizers
Replacement for browserweb_modules, .web.js, package.json field, alias configuration optionalias optionpackage.json field, alias optionpackage.json, alias optionno-
Requirable filesfile systemwebfile systemthrough pluginsfile system or through pluginsfile system
Runtime overhead243B + 20B per module + 4B per dependency14.7kB + 0B per module + (3B + X) per dependency415B + 25B per module + (6B + 2X) per dependency5.5kB for self-executing bundles, 38kB for full loader and polyfill, 0 plain modules, 293B CJS, 139B ES2015 System.register before gzipnone for ES2015 modules (other formats may have)-
Watch modeyesnot requiredwatchifynot needed in devrollup-watchyes

♦ in production mode (opposite in development mode)

X is the length of the path string

Bundling vs. Loading

It's important to note some key differences between loading and bundling modules. A tool like SystemJS, which can be found under the hood of JSPM, is used to load and transpile modules at runtime in the browser. This differs significantly from webpack, where modules are transpiled (through "loaders") and bundled before hitting the browser.

Each method has its advantages and disadvantages. Loading and transpiling modules at runtime can add a lot of overhead for larger sites and applications comprised of many modules. For this reason, SystemJS makes more sense for smaller projects where fewer modules are required. However, this may change a bit as HTTP/2 will improve the speed at which files can be transferred from server to client. Note that HTTP/2 doesn't change anything about transpiling modules, which will always take longer when done client-side.

Awesome webpack

A curated list of awesome webpack resources, libraries, tools and applications. It is inspired by the awesome list. Feel free to improve this list by contributing.

Webpack Ecosystem

Support Webpack

Community

Twitter

People passionate about Webpack (In no particular order)

Libraries

Loaders

File Type

  • HTML Loader: HTML loader module for Webpack. -- Maintainer: Webpack Team Github
  • Responsive Loader: Loader for responsive images. -- Maintainer: Jeremy Stucki Github
  • SVG Url Loader: Loader which loads SVG file as utf-8 encoded Url. -- Maintainer: Hovhannes Babayan Github
  • mermaid Loader: mermaid loader module (diagrams) for Webpack. -- Maintainer: Paul Musso Github
  • wasm loader: wasm binary loader module for Webpack. -- Maintainer: Arthur Buldauskas Github
  • Imagemin Loader/Plugin: Image minimizing loader + plugin for webpack. -- Maintainer: itgalaxy inc. Github
  • Bin Exec Loader: Pipe any file through any binary. -- Maintainer: Rafael Milewski Github
  • GraphQL Loader: .graphql document loader. -- Maintainer: Stephen Wan Github

Component & Template

  • Angular2 Template Loader: Inlines html and style's in Angular2 components. -- Maintainer: Sean Larkin Github Twitter
  • Handlebars Loader: A handlebars template loader for Webpack. -- Maintainer: Paul Carduner Github Twitter
  • Vue Loader: Webpack loader for Vue.js components. -- Maintainer: Vuejs Team Github Twitter
  • SVG React Loader - Webpack SVG to React Component Loader. -- Maintainer: Jerry Hamlet Github Twitter
  • Underscore Loader - Underscore and Lodash template loader. -- Maintainer: Emmanuel Antico Github Twitter
  • ngTemplate Loader - Angular1 Template Loader. -- Maintainer: Toby Rahilly Github
  • ngInlineStylesLoader: Optimizes inlined css of angular components. -- Maintainer: Severin Friede Github
  • Markup-inline Loader Inline SVGs to HTML -- Maintainer: Zhicheng Wang Github
  • Polymer Loader - Loader for Polymer elements. -- Maintainers: Rob Dodson Github - Chad Killingsworth Github - Bryan Coulter Github
  • Tag Loader - Loader for Riot tag files. -- Maintainer: Riot Team Github Twitter
  • Twig Loader - Twig template loader. -- Maintainer: Zimmo.be Team Github
  • Auto ngTemplate Loader: Autodetect Angular 1 templates and load them. -- Maintainer: Yash Kulshrestha Github
  • Pug Loader - Pug template loader (formerly Jade). -- Maintainer: Pug Team Github
  • Simple Nunjucks Loader - Nunjucks template loader. -- Maintainer: ogonkov Github
  • PWA Manifest Loader - PWA manifest loader. -- Maintainer: autopulated Github

Styles

  • Style Loader: Style loader module for Webpack. -- Maintainer: Webpack Team Github
  • PostCSS Loader: PostCSS loader for Webpack. -- Maintainer: PostCSS Team Github Twitter
  • CSS Loader: CSS loader module for Webpack. -- Maintainer: Webpack Team Github
  • SASS Loader: SASS loader for Webpack. -- Maintainer: Jorik Tangelder Github Twitter
  • Less Loader: Less loader module for Webpack. -- Maintainer: Webpack Team Github
  • Stylus Loader: A stylus loader for webpack. -- Maintainer: Kyle Robinson Young Github Twitter
  • Isomorphic Style Loader: Isomorphic CSS style loader for Webpack. -- Maintainer: Kriasoft Team Github Twitter
  • Minify CSS-in-JS Loader: RegExp-based minify CSS-in-JS loader for Webpack, don't need babel. -- Maintainer: Zack Young Github Twitter
  • SASS Resources Loader: Globally import SASS resources (variables, mixins, etc.). -- Maintainer: ShakaCode Github Twitter

Language & Framework

  • TS Loader: TypeScript loader for webpack. -- Maintainer: TypeStrong Team Github
  • Coffee Loader: Coffee loader module for Webpack. -- Maintainer: Webpack Team Github
  • Bootstrap Loader: Load Bootstrap styles in your Webpack bundle. -- Maintainer: ShakaCode Team Github Twitter
  • PostHTML Loader: PostHTML loader for Webpack. -- Maintainer: PostHTML Team Github Twitter
  • ELM Loader: Webpack loader for the Elm programming language. -- Maintainer: Richard Feldman Github Twitter
  • Fengari Loader: Run Lua code using Fengari. -- Maintainer: Daurnimator Github Twitter

Utility

  • Babel Loader: Webpack plugin for Babel. -- Maintainer: Babel Team Github Twitter
  • Worker Loader: Worker loader module for Webpack. -- Maintainer: Webpack Team Github
  • Resolve URL Loader: Resolves relative paths in url() statements. -- Maintainer: Ben Holloway Github
  • Import Loader: Imports loader module for Webpack. -- Maintainer: Webpack Team Github
  • Combine Loader - Converts a loaders array into a single loader string. -- Maintainer: James Friend Github
  • Icon Font Loader - Converts svgs into font icons in CSS. -- Maintainer: Forrest R. Zhao Github
  • Icons Loader - Generates an iconfont from SVG dependencies. -- Maintainer: Mike Vercoelen Github
  • Modernizr Loader - Get your modernizr build bundled with webpack. -- Maintainer: Peerigon Devs Github
  • ngRouter Loader - AOT capable NgModule lazy loading using angular router -- Maintainer: Shlomi Assaf Github Twitter
  • Lingui Loader - Compile message catalogs on the fly for jsLingui, i18n library -- Maintainer: Tomáš Ehrlich Github Twitter
  • Shell Loader - Run an arbitrary shell script on source files. -- Maintainer: Jo Sprague Github
  • EXIF Loader - Extract EXIF- & IPTC-data from your JPGs during build-time. -- Maintainer: Emanuel Kluge Github Twitter
  • esbuild Loader - Blazing fast alternative to babel-loader, ts-loader, and Terser powered by esbuild. -- Maintainer: Hiroki Osame Github Twitter

Testing

Integration Libraries

  • Dotenv Webpack: Compiles environment variables into your bundle via dotenv. -- Maintainer: Matthew Steele Github Twitter
  • Terse Webpack - Webpack simplified in a fluent API with presets. -- Maintainer: Eric Clemmons Github Twitter
  • SystemJS Webpack - Webpack bundling for SystemJS. -- Maintainer: Guy Bedford Github Twitter
  • Gulp Webpack Stream - Run webpack through a stream interface. -- Maintainer: Kyle Robinson Young Github Twitter
  • Webpack Blocks - Configure webpack using functional feature blocks. -- Maintainer: Andy Wermke Github Twitter
  • Webpacker - Official webpack gem for integration into ruby on rails projects. -- Maintainer: Rails Github
  • WebpackAspnetMiddleware - Development middleware for ASP.NET 5. -- Maintainer: Frank Wallis Github
  • Consul Key/Value Webpack: Compiles environment variables into your bundle via Consul KV-store. -- Maintainer: Marlon Maxwel Github

Webpack Plugins

  • DefinePlugin: Create global constants which can be configured at compile time. -- Maintainer: Webpack Team Github
  • Compression Plugin: Prepare assets to serve with Content-Encoding. -- Maintainer: Webpack Team Github
  • Offline Plugin: Offline plugin (ServiceWorker, AppCache) for Webpack. -- Maintainer: Arthur Stolyar Github Twitter
  • Rewire Plugin: Dependency injection for Webpack bundles. -- Maintainer: Johannes Ewald Github Twitter
  • HTML Webpack Plugin: Simplifies creation of HTML files. -- Maintainer: Jan Nicklas Github Twitter
  • Copy Webpack Plugin: Copy files and directories in webpack. -- Maintainer: Len Boyette Github Twitter
  • Split By Path: Split By Path Webpack Plugin. -- Maintainer: Bohdan Tkachenko Github Twitter
  • SW Precache - Generates a service worker to precache bundle. -- Maintainer: Will Farley Github
  • CoreJS Plugin - Core-JS as a webpack plugin. -- Maintainer: PatrickJS Github
  • Bundle Analyzer - Utility that represents bundles as an interactive treemap. -- Maintainer: Yuriy Grunin Github
  • Module Mapping - Maps modules onto different files. -- Maintainer: Spartez Team Github Twitter
  • Serverless Webpack - Serverless plugin to bundle your lambdas. -- Maintainer: Elastic Coders Github Twitter
  • Prerender SPA - Framework-agnostic static site generation for SPAs. -- Maintainer: Chris Fritz Github Twitter
  • Static Site Generator Plugin - Minimal, unopinionated static site generator. -- Maintainer: Mark Dalgleish Github
  • SVG Sprite Plugin - Plugin for SVG sprites and icons. -- Maintainer: Jeremy Tice (TodayTix) Github Twitter
  • Imagemin Webpack Plugin - Minify images with Imagemin. -- Maintainer: Gregory Benner Github Twitter
  • Prepack Webpack Plugin - A webpack plugin for prepack. -- Maintainer: Gajus Kuizinas Github
  • Modules CDN Webpack Plugin - Dynamically load your modules from a CDN. -- Maintainer: Thomas Sileghem Github
  • Generate package.json Plugin - Limit dependencies in a deployment package.json to only those that are actually being used by your bundle. -- Maintainer: Paul Myburgh Github
  • Progressive Web App Manifest - PWA manifest manager and generator. -- Maintainer: Arthur A. Bergamaschi Github
  • FileManager Webpack Plugin - Copy, move, delete files and directories before and after Webpack builds -- Maintainer: Gregory Nowakowski Github
  • Fork TS Checker Webpack Plugin - Webpack plugin that runs typescript type checker on a separate process. -- Maintainer: TypeStrong Team Github
  • Duplicate Package Checker Webpack Plugin - Warns you when multiple versions of the same package exist in your bundle -- Maintainer: Darren Scerri Github
  • Circular Dependency Plugin - Detect modules with circular dependencies when bundling -- Maintainer: Aaron Ackerman Github
  • webpack-inject-plugin - A webpack plugin to dynamically inject code into the bundle. -- Maintainer: Adam Dierkens Github
  • Public Path Manipulation Plugin - control publicPath of dynamically loaded resources at runtime -- Maintainer: Andrew Goldis Github
  • Build Notifier Plugin - Display OS-level notifications for build errors and warnings. -- Maintainer: Rocco Cataldo Github
  • CSS Cleanup Webpack Plugin - A plugin to remove duplicated and unused css rules -- Maintainer: Dominik Weber Github
  • Extension Reloader - Hot reloading while developing browser extensions -- Maintainer: Rubens P. G. Cavalcante Github Twitter
  • Htmls Webpack Plugin: Simple and fast multiple-htmls-generating plugin for webpack. -- Maintainer: Zack Young Github Twitter
  • Mini css extract plugin: Lightweight CSS extraction plugin -- Maintainer: Webpack Contrib Github
  • build-hash-webpack-plugin For each build, Webpack generates an in-memory hash allowing to know if two build outputs are the same or not. This plugin writes the described build hash in a separate json file. -- Maintainer: Réda Housni Alaoui Github Twitter
  • webpack-hook-plugin - run any shell commands before or after webpack builds -- Maintainer: David Kwon Github
  • Dynamic Vendor Webpack Plugin - Gives you a way to import vendors with dynamic variable and specific code splitting. -- Maintainer Lilian Saget-Lethias Github Twitter
  • Define Variable Webpack Plugin - Enhancement of DefinePlugin to store defined things in actual variables. -- Maintainer Lilian Saget-Lethias Github Twitter
  • Shell Script Webpack Plugin - A plugin for running arbitrary shell scripts when compiler hooks are triggered. -- Maintainer Drew Loomer Github Twitter
  • Stylelint Webpack Plugin: A Stylelint plugin for webpack. -- Maintainer: Ricardo Gobbo de Souza Github
  • ESLint Webpack Plugin: A ESLint plugin for webpack . -- Maintainer: Ricardo Gobbo de Souza Github
  • Exclude Assets Webpack Plugin: A plugin to exclude assets from webpack output based on a path RegExp pattern. -- Maintainer: Klayton Faria Github
  • Webpack Shell Plugin Next: A plugin allows you to run any shell commands before or after webpack builds. -- Maintainer: Kuzmin Pavel Github
  • Gettext Webpack Plugin: Embed localization into your bundle using gettext. -- Maintainer: Juan Luis Paz Github
  • Node Polyfill Plugin: Polyfill Node.js core modules. -- Maintainer: Richie Bendall Github Twitter
  • Bytenode Plugin: Compile JavaScript into bytecode using bytenode. -- Maintainer: Herbert Treis Neto Github
  • Chrome Extension Archive Webpack Plugin Create archive file to publish Chrome Exentions to Chrome Web Store -- Maintainer: KeisukeYamashita Github
  • Layer-pack Webpack Plugin Allow to glob imports file & directories, build mono repo apps via inheritable source code / npm packages & share webpack configs -- Maintainer: Braun Nathanaël Github
  • webpack-typescript-directory-compile-plugin Configure an source directory of typescript files and an output directory for JavaScript files. Each typescript file in the source directory and any newly added files will be compiled to individual JavaScript files. -- Maintainer: Stephen Sigwart Github
  • CycloneDX Webpack Plugin: Create CycloneDX Software Bill of Materials (SBOM) from webpack bundles at compile time. -- Maintainer: OWASP CycloneDX Team Github
  • Transpile Webpack Plugin: Transpiles input files into output files individually without bundling together. -- Maintainer: Chungen Li Github Twitter
  • Manifest Extraction Plugin: Generates an asset manifest after compiling webpack. -- Maintainer: Andrew Powell Github
  • Transform Async Modules Plugin: A Webpack plugin to transpile async module output using Babel. Allows transpiling top level await to ES5. -- Maintainer: Steve Repsher Github
  • CSS Layering Plugin: Wrap CSS in cascade layers. -- Maintainer: Kresimir Buric Github

Webpack Tools

  • Webpack Dev Middleware: Middleware which arguments a live bundle. -- Maintainer: Webpack Team Github
  • Webpack Dev Server: Serves a webpack app. Updates the browser on changes. -- Maintainer: Webpack Team Github
  • Webpack Merge - Merge designed for Webpack. -- Maintainer: Juho Vepsäläinen Github Twitter
  • NPM Install Webpack - Automatically install & save deps with Webpack. -- Maintainer: Eric Clemmons Github Twitter
  • Webpack Validator - Validates your webpack config with Joi. -- Maintainer: js-dxtools Team Github
  • Webpack Config Utils - Util. to make your webpack config easier to read. -- Maintainer: Kent C. Dodds Github Twitter
  • Angular2 Webpack Toolkit - Webpack tools and helpers for Angular 2. -- Maintainer: AngularClass Github Twitter
  • Webpack Bundle Analyzer - Represents bundles as an interactive treemap. -- Maintainer: Yuriy Grunin Github Twitter
  • HJS Webpack: Helpers/presets for setting up webpack with hotloading. -- Maintainer: Henrik Joreteg Github
  • Webpack Dashboard: A CLI dashboard for webpack dev server. -- Maintainer: Formidable Labs Github
  • Neutrino: Combines the power of Webpack with the simplicity of presets. -- Maintainer: Eli Perelman Github
  • Speed Measure Plugin - Measures the speed of your webpack plugins and loaders. -- Maintainer: Stephen Cook Github
  • Time Analytics Plugin - Analytics the time cost of loaders and plugins in webpack. Successor of Speed Measure Plugin -- Maintainer: Song Gao Github
  • packtracker.io - Webpack bundle analysis on every commit, report webpack stats to every pull request.
  • BundleStats: Analyze webpack stats(bundle size, assets, modules, packages) and compare the results between different builds. -- Maintainer: Vio Github Twitter
  • Webpack Landing Generator: Easy way to create landing page that converts. -- Maintainer: Aliaksei Kuncevic Github Twitter
  • Webpack Dev Server Firewall: Prevents access to dev server from unknown IPs. -- Maintainer: Igor Adamenko Github Twitter
  • RelativeCI: Run in-depth bundle analyses on every build and monitor webpack bundle size, assets, modules, and packages. Github

Research & Training

Articles

Videos

Courses

Books

  • SurviveJS - Webpack: Free book guiding from a webpack apprentice to master. Covers dev, prod, and advanced topics.

Webpack Examples

Community Examples

Angular

Framework Agnostic

React

Vue

Other

Branding Guidelines

Here you can find webpack project brand guidelines, assets, and license. See our official media repository for more information and to find the license that governs this work. Click any of the images to download them.

The Name

Webpack can be written with a capital W when used at the start of a sentence, otherwise it should be written in lower-case letters.

Logo

The webpack logo should be placed on a white background with enough space around it like this:

webpack logo default with proper spacing on light background

svg | png | jpg

Double the size of the inner dark blue cube to get an idea how much space the logo should have.

For dark backgrounds, you can use the negative version of the logo:

webpack logo default with proper spacing on light background

svg | png | jpg

Icon only

The icon is designed to be used in layout-constrained areas. As previously stated, please prefer icon + text.

icon example

svg | png | jpg

Square-sized icon for bigger areas (like avatars or profile pictures):

icon square big example

svg | png | jpg

Square-sized icon for smaller areas (like favicons):

icon square small example

svg | png | jpg

icon square small example

Color Palette

The following colors are used throughout the site in various combinations and on our fancy clothing line launched with the help of Open Collective and Threadless over at the official webpack store!

Color NameHEX CodeRGB CodeSample
Malibu:HEX #8dd6f9rgb: 141, 214, 249
 
Denim:HEX #1d78c1rgb: 29, 120, 193
 
Fiord:HEX #465E69rgb: 70, 94, 105
 
Outer Space:HEX #2B3A42rgb: 43, 58, 66
 
White:HEX #ffffffrgb: 255, 255, 255
 
Concrete:HEX #f2f2f2rgb: 242, 242, 242
 
Alto:HEX #dededergb: 222, 222, 222
 
Dusty Gray:HEX #999999rgb: 153, 153, 153
 
Dove Gray:HEX #666666rgb: 102, 102, 102
 
Emperor:HEX #535353rgb: 83, 83, 83
 
Mine Shaft:HEX #333333rgb: 51, 51, 51
 

In addition, you can grab the following file types directly from these links:

psd | png | ai | svg

License

The logo and the brand name are not MIT licensed. Please check our LICENSE for usage guidelines.

Glossary

This index lists common terms used throughout the webpack ecosystem.

A

  • Asset: This is a general term for the images, fonts, media, and any other kind of files that are typically used in websites and other applications. These typically end up as individual files within the output but can also be inlined via things like the style-loader or url-loader.

B

  • Bundle: Produced from a number of distinct modules, bundles contain the final versions of source files that have already undergone the loading and compilation process.
  • Bundle Splitting: This process offers one way of optimizing a build, allowing webpack to generate multiple bundles for a single application. As a result, each bundle can be isolated from changes effecting others, reducing the amount of code that needs to be republished and therefore re-downloaded by the client and taking advantage of browser caching.

C

  • Chunk: This webpack-specific term is used internally to manage the bundling process. Bundles are composed out of chunks, of which there are several types (e.g. entry and child). Typically, chunks directly correspond with the output bundles however, there are some configurations that don't yield a one-to-one relationship.
  • Code Splitting: Refers to dividing your code into various bundles/chunks which you can then load on demand instead of loading a single bundle containing everything.
  • Configuration: webpack configuration file is a plain old JavaScript file that exports an object. This object is then processed by webpack based upon its defined properties.

D

  • Dependency Graph: Any time one file depends on another, webpack treats this as a dependency. Starting from an entry point(s), webpack recursively builds a dependency graph that includes every module/asset your application needs.

E

  • Entry Point: The entry point tells webpack where to start and follows the graph of dependencies to know what to bundle. You can think of your application's entry point(s) as the contextual root(s) of what you want bundled.

H

  • Hot Module Replacement (HMR): A process that exchanges, adds, or removes modules while an application is running without a full page reload.

L

  • Loaders: Transformations that are applied on the source code of a module. They allow you to pre-process files as you require() or "load" them. Similar to a 'task-runner'.
  • Lazy Loading: A process of loading parts (chunks) of your application lazily. In other words loading them only when we really need them.

M

  • Module: Discrete chunks of functionality that provide a smaller surface area than a full program. Well-written modules provide solid abstractions and encapsulation boundaries which make up a coherent design and clear purpose.
  • Module Resolution: A module can be required as a dependency from another module and a resolver is a library which helps in locating a module by its absolute path. Modules are searched for inside all directories specified in resolve.modules.
  • Manifest: The runtime will use it to resolve and load modules once they've been bundled and shipped to the browser.

O

  • Output: Option(s) specifying where to output the compiled files to disk.

    Note, that while there can be multiple entry points, only one output configuration is specified.

P

  • Plugin: A JavaScript object that has an apply property. This apply property is called by the webpack compiler, giving access to the entire compilation lifecycle. These packages will typically extend compilation functionality in one way or another.

R

  • Request: Refers to the expression in the require/import statement, e.g. require("./template/" + name + ".ejs"), the request is "./template/" + name + ".ejs".

S

  • Shimming: Not all JS files can be used directly with webpack. The file maybe in an unsupported module format, or not even in any module format. It is here where shimming comes into play.

T

  • Target: User configured deployment target(s) listed here to compile for a specific environment like the browser, NodeJS, or Electron.
  • Tree Shaking: Unused/Excess code elimination, or more precisely, live code importing. Compilers like webpack will accomplish this by analyzing the various kinds import statements and usage of the imported code to determine what parts of dependencies are actually being utilized, dropping parts of the "tree" that are not.

V

  • Vendor Entry Point: Create dependency graphs starting at both app.js and vendors.js. These graphs are completely separate and independent of each other to allow leverage of CommonsChunkPlugin and extract any vendor references from your app bundle into your vendor bundle. Helps achieve a common pattern in webpack known as long-term vendor-caching.

W

  • webpack: A highly configurable module bundler for modern JavaScript applications.

License

webpack

Webpack is MIT licensed.

webpack logo and icon

The webpack logo and icon are under a different license which can be found here.

webpack documentation

The content on https://webpack.js.org/ is available under Creative Commons BY 4.0 license meaning attribution is required should you use the content elsewhere.

webpack code samples

The code samples use CC0 1.0 Universal (CC0 1.0) (Public Domain) and you are free to use them as you like.

Edit this page·Print this page

1 Contributor

webpack