Webpack and React

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

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