Webpack and React - Speaker Deck

Slide 1

Slide 1 text

Webpack @sebasporto

Slide 2

Slide 2 text

React Components

Slide 3

Slide 3 text

Globals :( App.List = React.createClass({ ... }) React.render(, ...)

Slide 4

Slide 4 text

? Will just pack everything

Slide 5

Slide 5 text

What we want = resolve dependencies Dead code

Slide 6

Slide 6 text

CommonJS :) module.exports = React.createClass({ ... }) var List = require('./list') React.render(, ...)

Slide 7

Slide 7 text

Webpack == Just what we need

Slide 8

Slide 8 text

★ CommonJS ★ AMD ★ ES6

Slide 9

Slide 9 text

Multiple entry points

Slide 10

Slide 10 text

/users /dashboard users-bundle.js dashboard-bundle.js

Slide 11

Slide 11 text

Entry points entry: { common: "./fe/ap/common.js", dashboard: "./fe/ap/dashboard.jsx", ... },

Slide 12

Slide 12 text

JSX JS ES6 Loaders Coffeescript

Slide 13

Slide 13 text

Loaders loaders: [ { test: /\.css/, loader: "style-loader!css-loader" }, { test: /\.jsx$/, loader: "jsx-loader?stripTypes" }, ...

Slide 14

Slide 14 text

CSS Code Images Fonts JS JSX ES6 Coffee Less Sass SVG Jpeg png eot ttf Templates

Slide 15

Slide 15 text

Loaders can have parameters Read JSX Remove Flow annotations Output JS { test: /\.jsx$/, loader: "jsx-loader?stripTypes" },

Slide 16

Slide 16 text

Loaders can be chained Convert LESS to CSS Loads CSS Inject CSS in document { test: /\.less$/, loader: 'style-loader!css-loader!less-loader' },

Slide 17

Slide 17 text

Interesting loaders ★ jsx loader ★ autopreﬁxer-loader

Slide 18

Slide 18 text

Images ★ base64 encoded ★ binary data as ASCII

Slide 19

Slide 19 text

Plug-ins

Slide 20

Slide 20 text

Operate on the entire bundles Interim bundles Source code Plug-ins Final bundles

Slide 21

Slide 21 text

Plug-ins, e.g. ★ Stats ★ Uglify ★ Dedupe ★ Write HTML ★ Localisations

Slide 22

Slide 22 text

Load on demand Split Chunk Chunk

Slide 23

Slide 23 text

On demand require.ensure(["foo", "bar"], function(require) { var foo = require("foo"); // ... }); load foo and bar on demand exec the rest  when loaded

Slide 24

Slide 24 text

NPM integration ★ Install libs using NPM ★ Package.json for dependencies ★ Use NPM packages from your code

Slide 25

Slide 25 text

Using webpack ★ npm install webpack -g ★ Create webpack.conﬁg.js ★ Run a watcher

Slide 26

Slide 26 text

Watcher $ webpack --watch Only rebuilds touched ﬁles

Slide 27

Slide 27 text

Or dev server $ webpack-dev-server

Slide 28

Slide 28 text

Hot loader https://github.com/gaearon/react-hot-loader ★ Supposed to be great ★ I haven't used it yet

Slide 29

Slide 29 text

For production Webpack Source code Development bundles Deployment Pipeline Production bundles Sprockets

Slide 30

Slide 30 text

Dependency visualisation http://webpack.github.io/analyse/

Slide 31

Slide 31 text

Browserify? They do almost the same Plug-in based Batteries included

Slide 32

Slide 32 text

The bad parts: Documentation!

Slide 33

Slide 33 text

Resources ★ Ofﬁcial  documentation == :( ★ https://github.com/ petehunt/webpack-howto ?