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