ag-grid is proud to partner with webpack

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.

Logo

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

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:

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.

svg | png | jpg

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

svg | png | jpg

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

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 ;))

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

webpack