Webpack is a module bundler that takes modules with dependencies and generates static assets representing those modules. It installs as an npm package and can be run from the command line or configured via a webpack.config.js file. Loaders allow preprocessing of different file types as they are imported or loaded, while plugins add functionality related to bundles in webpack.

1. A r o c k J a v a S c r i p t m o d u l e b u n d l e r
WEBPACK
Webpack has solidified itself as our go-to JavaScript
module bundler.
Song YANG

2. 2
WHAT IS WEPACK?

3. 3
Webpack is a module bundler.
Webpack takes modules with dependencies and generates static assets representing those
modules.

4. 44
JS MODULES
ENCAPSULATION
No global scope pollution
different library versions use
Security
ORGANIZATION
Convenient using
Decoupling
Re-use / DRY principle

5. 55
AMD, COMMONJS, ES6

6. 66
INSTALLATION AND USE
Installs as a npm package
Could be runned from CLI
Config webpack.config.js
$ npm install webpack -g
$ webpack <entry.js> <result.js>
export default {
entry: 'entry.js',
output: {
path: './src',
filename: 'bundled.js',
}
}

7. 7
.C S S . S V G
WHAT ABOUT OTHER FILES
. J P G .W O F F
.T T F . E O T . P N G .G I F

8. LOADERS
8

9. Loaders allow you to preprocess files
as you require() or “load” them.
Loaders are kind of like “tasks” are in
other build tools
9
LOADERS

10. 1 0
LOADERS

11. 1 1
WEBPACK + BABEL
Turn ES6, JSX code into vanilla ES5 using Babel.

12. LIST OF LOADERS
http://webpack.github.io/docs/list-of-loaders.html
1 2
LOADERS

13. PLUGINS
1 3

14. Use plugins to add functionality
typically related to bundles in
webpack.
1 4
PLUGINS

15. 1 5
PLUGINS

16. LIST OF PLUGINS
http://webpack.github.io/docs/list-of-plugins.html
1 6
PLUGINS

17. 1 7
C O D E L O A D E R S P L U G I N S O U T P U T
PLUGINS

18. 1 8

19. T H A N K S
QA