Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Webpack and React

sporto
March 03, 2015

Webpack and React

Webpack is a great fit for React.js applications, this decks explains the major features of Webpack

sporto

March 03, 2015
Tweet

More Decks by sporto

Other Decks in Technology

Transcript

  1. Webpack
    @sebasporto

    View Slide

  2. React
    Components

    View Slide

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

    View Slide

  4. ?
    Will just pack everything

    View Slide

  5. What we want =
    resolve dependencies
    Dead code

    View Slide

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

    View Slide

  7. Webpack == Just what we need

    View Slide

  8. ★ CommonJS
    ★ AMD
    ★ ES6

    View Slide

  9. Multiple entry points

    View Slide

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

    View Slide

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

    View Slide

  12. JSX
    JS
    ES6
    Loaders
    Coffeescript

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  17. Interesting loaders
    ★ jsx loader
    ★ autoprefixer-loader

    View Slide

  18. Images
    ★ base64 encoded
    ★ binary data as ASCII

    View Slide

  19. Plug-ins

    View Slide

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

    View Slide

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

    View Slide

  22. Load on
    demand
    Split
    Chunk
    Chunk

    View Slide

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

    when loaded

    View Slide

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

    View Slide

  25. Using webpack
    ★ npm install webpack -g
    ★ Create webpack.config.js
    ★ Run a watcher

    View Slide

  26. Watcher
    $ webpack --watch
    Only rebuilds touched files

    View Slide

  27. Or dev server
    $ webpack-dev-server


    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  32. The bad parts:
    Documentation!

    View Slide

  33. Resources
    ★ Official

    documentation == :(
    ★ https://github.com/
    petehunt/webpack-howto
    ?

    View Slide

  34. Webpack is brilliant
    Can do almost anything

    View Slide

  35. Thanks!

    View Slide