webpack: your final module bundler

webpack

your final module bundler

whoamiandrea giannantonio

akajellybelly

front-end developer at

@jellybellydev

modular javascript

encapsulationorganization

no global scope pollutiondifferent library versions usesecurity

convenient usingdecouplingre-use

how define module

global variables / namespace / script tag

commonjs

var $ = require('lib/jQuery'), _ = require('lib/lodash');

//...stuff

module.exports = ...;

amd

define( 'fooModule', ['lib/jQuery', 'lib/lodash'], function ($, _) { //...stuff return { ... } } }); require(['lib/jQuery', 'fooModule'], function ($, foo) { //...stuff } });

amd with commonjs

define(function (require, exports, module) { var $ = require('lib/jQuery'), _ = require('lib/lodash');

//...stuff

module.exports = ...; });

es6

import 'lib/jQuery' as $; import 'lib/lodash' as _;

//...stuff

export var result = { ... }

webpackis a module bundler and not a task runner

understands almost any module system: AMD, CommonJS,ES6 modules, etc

analyzes dependencies among your modules (not only JSbut also CSS, HTML, etc) and generates assets

creates one or many bundles

gives you hooks to transform modules

the flow

or

install

npm install webpack --save-dev

npm install webpack -g

configurationcommand line interface

webpack <entry.js> <result.js>

node.js api (great to integrate with grunt, gulp, broccoli, etc)

var webpack = require('webpack'); webpack( { /* configuration */ }, function(err, stats) { /* stuff */ });

file module (touch webpack.config.js)

module.exports = { /* configuration */ };

optionscontext: base directory for resolving the entry option (it is absolute path)

entry: the entry point of your bundle (can be a string, an array or an object)

output: determines the out folder, file names, etc

module: options affecting normal modules, like which one must be

automatically loaded

resolve: determines how modules are loaded

devtool: enhance debugging (generates map files)

plugins: additional plugins added to the compiler

more...

do you want to know more?

let's go to the code

who uses it

comparisonfeature webpack requirejs browserify jspm rollup

commonjs`require`

yes only wrappingin define

yes yes plugin

amd `define` yes yes plugin yes no

amd `require` yes yes no yes no

amd `require`loads on demand

yes manualconfiguration

no yes no

single bundle yes yes yes yes yes

multiple bundles yes manualconfiguration

manualconfiguration

yes no

common bundlemanual

configurationyes manual

configurationno no

watch mode yes no yes no no

webpack 2 is coming

roadmapnative es6 import, export and system.importtree shaking for es6config can be a function and –envsimplification resolving optionschunk loading stuff now relies on promise being available

recapallow commonjs, amd and es6allow single and multiple entry pointcommon plugin for shared code between modulesminimize your codesupport loader to pre-process files i.e. sass, less, jsx etc.loaders +150plugins +30live reload with webpack-dev-serverfriend of your task runner

questions?

thank you

credits by Андрей Вандакуров

by Antonio Santiago by Aleksandr Tkalenko

by Alper Ortac by Daniel Perez

webpack docswebpack the new rock star of build toolswebpack the not another task runner toollet’s talk about webpackwebpack the module bundlerwebpack is awesomewho uses it by stackshare.iogiphy.com