Printable

webpack

Write Your Code

src/index.js

import bar from './bar';

bar();

src/bar.js

export default function bar() {
  //
}

Bundle It

Without config or provide custom webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
};

page.html

<!doctype html>
<html>
  <head>
    ...
  </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.

Feature webpack/webpack jrburke/requirejs substack/node-browserify jspm/jspm-cli rollup/rollup brunch/brunch

Feature

webpack/webpack

jrburke/requirejs

substack/node-browserify

jspm/jspm-cli

rollup/rollup

brunch/brunch

Additional chunks are loaded on demand

yes

yes yes no System.import no no

Feature

webpack/webpack

jrburke/requirejs

substack/node-browserify

jspm/jspm-cli

rollup/rollup

brunch/brunch

AMD define

yes

yes yes deamdify yes rollup-plugin-amd yes

Feature

webpack/webpack

jrburke/requirejs

substack/node-browserify

jspm/jspm-cli

rollup/rollup

brunch/brunch

AMD require

yes

yes yes no yes no yes

Feature

webpack/webpack

jrburke/requirejs

substack/node-browserify

jspm/jspm-cli

rollup/rollup

brunch/brunch

AMD require loads on demand

yes

yes with manual configuration no yes no no

Feature

webpack/webpack

jrburke/requirejs

substack/node-browserify

jspm/jspm-cli

rollup/rollup

brunch/brunch

CommonJS exports

yes

yes only wrapping in define yes yes commonjs-plugin yes

Feature

webpack/webpack

jrburke/requirejs

substack/node-browserify

jspm/jspm-cli

rollup/rollup

brunch/brunch

CommonJS require

yes

yes only wrapping in define yes yes commonjs-plugin yes

Feature

webpack/webpack

jrburke/requirejs

substack/node-browserify

jspm/jspm-cli

rollup/rollup

brunch/brunch

CommonJS require.resolve

yes

yes no no no no

Feature

webpack/webpack

jrburke/requirejs

substack/node-browserify

jspm/jspm-cli

rollup/rollup

brunch/brunch

Concat in require require("./fi" + "le")

yes

yes no♦ no no no

Feature

webpack/webpack

jrburke/requirejs

substack/node-browserify

jspm/jspm-cli

rollup/rollup

brunch/brunch

Debugging support

SourceUrl, SourceMaps

SourceUrl, SourceMaps not required SourceMaps SourceUrl, SourceMaps SourceUrl, SourceMaps SourceMaps

Feature

webpack/webpack

jrburke/requirejs

substack/node-browserify

jspm/jspm-cli

rollup/rollup

brunch/brunch

Dependencies

19MB / 127 packages

19MB / 127 packages 11MB / 118 packages 1.2MB / 1 package 26MB / 131 packages ?MB / 3 packages

Feature

webpack/webpack

jrburke/requirejs

substack/node-browserify

jspm/jspm-cli

rollup/rollup

brunch/brunch

ES2015 import/export

yes (webpack 2)

yes (webpack 2) no no yes yes yes, via es6 module transpiler

Feature

webpack/webpack

jrburke/requirejs

substack/node-browserify

jspm/jspm-cli

rollup/rollup

brunch/brunch

Expressions in require (guided) require("./templates/" + template)

yes (all files matching included)

yes (all files matching included) no♦ no no no no

Feature

webpack/webpack

jrburke/requirejs

substack/node-browserify

jspm/jspm-cli

rollup/rollup

brunch/brunch

Expressions in require (free) require(moduleName)

with manual configuration

with manual configuration no♦ no no no

Feature

webpack/webpack

jrburke/requirejs

substack/node-browserify

jspm/jspm-cli

rollup/rollup

brunch/brunch

Generate a single bundle

yes

yes yes♦ yes yes yes yes

Feature

webpack/webpack

jrburke/requirejs

substack/node-browserify

jspm/jspm-cli

rollup/rollup

brunch/brunch

Indirect require var r = require; r("./file")

yes

yes no♦ no no no

Feature

webpack/webpack

jrburke/requirejs

substack/node-browserify

jspm/jspm-cli

rollup/rollup

brunch/brunch

Load each file separate

no

no yes no yes no no

Feature

webpack/webpack

jrburke/requirejs

substack/node-browserify

jspm/jspm-cli

rollup/rollup

brunch/brunch

Mangle path names

yes

yes no partial yes not required (path names are not included in the bundle) no

Feature

webpack/webpack

jrburke/requirejs

substack/node-browserify

jspm/jspm-cli

rollup/rollup

brunch/brunch

Minimizing

Terser

Terser uglify, closure compiler uglifyify yes uglify-plugin UglifyJS-brunch

Feature

webpack/webpack

jrburke/requirejs

substack/node-browserify

jspm/jspm-cli

rollup/rollup

brunch/brunch

Multi pages build with common bundle

with manual configuration

with manual configuration yes with manual configuration with bundle arithmetic no no

Feature

webpack/webpack

jrburke/requirejs

substack/node-browserify

jspm/jspm-cli

rollup/rollup

brunch/brunch

Multiple bundles

yes

yes with manual configuration with manual configuration yes no yes

Feature

webpack/webpack

jrburke/requirejs

substack/node-browserify

jspm/jspm-cli

rollup/rollup

brunch/brunch

Node.js built-in libs require("path")

yes

yes no yes yes node-resolve-plugin

Feature

webpack/webpack

jrburke/requirejs

substack/node-browserify

jspm/jspm-cli

rollup/rollup

brunch/brunch

Other Node.js stuff

process, __dir/filename, global

process, __dir/filename, global - process, __dir/filename, global process, __dir/filename, global for cjs global ( commonjs-plugin )

Feature

webpack/webpack

jrburke/requirejs

substack/node-browserify

jspm/jspm-cli

rollup/rollup

brunch/brunch

Plugins

yes

yes yes yes yes yes yes

Feature

webpack/webpack

jrburke/requirejs

substack/node-browserify

jspm/jspm-cli

rollup/rollup

brunch/brunch

Preprocessing

loaders, transforms

loaders, transforms loaders transforms plugin translate plugin transforms compilers, optimizers

Feature

webpack/webpack

jrburke/requirejs

substack/node-browserify

jspm/jspm-cli

rollup/rollup

brunch/brunch

Replacement for browser

web_modules, .web.js, package.json field, alias config option

web_modules , .web.js , package.json field, alias config option alias option package.json field, alias option package.json, alias option no

Feature

webpack/webpack

jrburke/requirejs

substack/node-browserify

jspm/jspm-cli

rollup/rollup

brunch/brunch

Requirable files

file system

file system web file system through plugins file system or through plugins file system

Feature

webpack/webpack

jrburke/requirejs

substack/node-browserify

jspm/jspm-cli

rollup/rollup

brunch/brunch

Runtime overhead

243B + 20B per module + 4B per dependency

243B + 20B per module + 4B per dependency 14.7kB + 0B per module + (3B + X) per dependency 415B + 25B per module + (6B + 2X) per dependency 5.5kB for self-executing bundles, 38kB for full loader and polyfill, 0 plain modules, 293B CJS, 139B ES2015 System.register before gzip none for ES2015 modules (other formats may have)

Feature

webpack/webpack

jrburke/requirejs

substack/node-browserify

jspm/jspm-cli

rollup/rollup

brunch/brunch

Watch mode

yes

yes not required watchify not needed in dev rollup-watch yes

♦ 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.

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 should always be written in lower-case letters, even at the beginning of a sentence.

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

Just 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

Please use the icon + text whenever possible.

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

For those of you following our guidelines and have gotten this far, we've made a special smaller size image used especially for custom emoji (like in a slack or gitter channel ;))

icon square small example

Font

We use the beautiful Geomanist Medium font from the extremely talented folks at the Atipo Foundry who provide the entire font family at a 'pay what you want' model.

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 Name HEX Code RGB Code Sample

Color Name

HEX Code

RGB Code

Sample

Malibu:

HEX #8dd6f9

HEX #8dd6f9 rgb: 141, 214, 249
 

Color Name

HEX Code

RGB Code

Sample

Denim:

HEX #1d78c1

HEX #1d78c1 rgb: 29, 120, 193
 

Color Name

HEX Code

RGB Code

Sample

Fiord:

HEX #465E69

HEX #465E69 rgb: 70, 94, 105
 

Color Name

HEX Code

RGB Code

Sample

Outer Space:

HEX #2B3A42

HEX #2B3A42 rgb: 43, 58, 66
 

Color Name

HEX Code

RGB Code

Sample

White:

HEX #ffffff

HEX #ffffff rgb: 255, 255, 255
 

Color Name

HEX Code

RGB Code

Sample

Concrete:

HEX #f2f2f2

HEX #f2f2f2 rgb: 242, 242, 242
 

Color Name

HEX Code

RGB Code

Sample

Alto:

HEX #dedede

HEX #dedede rgb: 222, 222, 222
 

Color Name

HEX Code

RGB Code

Sample

Dusty Gray:

HEX #999999

HEX #999999 rgb: 153, 153, 153
 

Color Name

HEX Code

RGB Code

Sample

Dove Gray:

HEX #666666

HEX #666666 rgb: 102, 102, 102
 

Color Name

HEX Code

RGB Code

Sample

Emperor:

HEX #535353

HEX #535353 rgb: 83, 83, 83
 

Color Name

HEX Code

RGB Code

Sample

Mine Shaft:

HEX #333333

HEX #333333 rgb: 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 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 config 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'.

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.

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".

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.

Vote

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.


Contributors