webpack: your final module bundler

24
webpack your final module bundler

Upload: andrea-giannantonio

Post on 15-Apr-2017

413 views

Category:

Software


0 download

TRANSCRIPT

Page 1: Webpack: your final module bundler

webpack

your final module bundler

Page 2: Webpack: your final module bundler

whoamiandrea giannantonio

akajellybelly

front-end developer at

@jellybellydev

Page 3: Webpack: your final module bundler

modular javascript

encapsulationorganization

no global scope pollutiondifferent library versions usesecurity

convenient usingdecouplingre-use

Page 4: Webpack: your final module bundler

how define module

Page 5: Webpack: your final module bundler

global variables / namespace / script tag

Page 6: Webpack: your final module bundler

commonjs

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

//...stuff

module.exports = ...;

Page 7: Webpack: your final module bundler

amd

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

Page 8: Webpack: your final module bundler

amd with commonjs

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

//...stuff

module.exports = ...; });

Page 9: Webpack: your final module bundler

es6

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

//...stuff

export var result = { ... }

Page 10: Webpack: your final module bundler

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

Page 11: Webpack: your final module bundler

the flow

Page 12: Webpack: your final module bundler

or

install

npm install webpack --save-dev

npm install webpack -g

Page 13: Webpack: your final module bundler

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 */ };

Page 14: Webpack: your final module bundler

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

Page 15: Webpack: your final module bundler

do you want to know more?

Page 17: Webpack: your final module bundler

who uses it

Page 18: Webpack: your final module bundler

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

Page 19: Webpack: your final module bundler

webpack 2 is coming

Page 20: Webpack: your final module bundler

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

Page 21: Webpack: your final module bundler

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

Page 22: Webpack: your final module bundler

questions?

Page 23: Webpack: your final module bundler

thank you

Page 24: Webpack: your final module bundler

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