Webpack has quickly become one of the most popular choices among web developer builder tools. It can build, minify, split and do others awesome things to your assets. We will do a simple walk through to let you familiar with the basics of webpack and all its potential.

1. webpack
your final module bundler

2. whoami
andrea giannantonio
aka
jellybelly
front-end developer at
@jellybellydev

3. modular javascript
encapsulation
organization
no global scope pollution
different library versions use
security
convenient using
decoupling
re-use

4. how define module

5. global variables / namespace / script tag

6. commonjs
var $ = require('lib/jQuery'),
_ = require('lib/lodash');
//...stuff
module.exports = ...;

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

8. amd with commonjs
define(function (require, exports, module) {
var $ = require('lib/jQuery'),
_ = require('lib/lodash');
//...stuff
module.exports = ...;
});

9. es6
import 'lib/jQuery' as $;
import 'lib/lodash' as _;
//...stuff
export var result = { ... }

10. webpack
is 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 JS
but also CSS, HTML, etc) and generates assets
creates one or many bundles
gives you hooks to transform modules

11. the flow

12. or
install
npm install webpack --save-dev
npm install webpack -g

13. configuration
command 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 */ };

14. options
context: 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...

15. do you want to know more?

16. let's go to the code

17. who uses it

18. comparison
feature webpack requirejs browserify jspm rollup
commonjs
`require`
yes
only wrapping
in define
yes yes plugin
amd `define` yes yes plugin yes no
amd `require` yes yes no yes no
amd `require`
loads on demand
yes
manual
configuration
no yes no
single bundle yes yes yes yes yes
multiple bundles yes
manual
configuration
manual
configuration
yes no
common bundle
manual
configuration
yes
manual
configuration
no no
watch mode yes no yes no no

19. webpack 2 is coming

20. roadmap
native es6 import, export and system.import
tree shaking for es6
config can be a function and –env
simplification resolving options
chunk loading stuff now relies on promise being available

21. recap
allow commonjs, amd and es6
allow single and multiple entry point
common plugin for shared code between modules
minimize your code
support loader to pre-process files i.e. sass, less, jsx etc.
loaders +150
plugins +30
live reload with webpack-dev-server
friend of your task runner

22. questions?

23. thank you

24. credits
by Андрей Вандакуров
by Antonio Santiago
by Aleksandr Tkalenko
by Alper Ortac
by Daniel Perez
webpack docs
webpack the new rock star of build tools
webpack the not another task runner tool
let’s talk about webpack
webpack the module bundler
webpack is awesome
who uses it by stackshare.io
giphy.com