Webpack and React

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

Transcript

1. Webpack @sebasporto
2. React Components
3. Globals :( App.List = React.createClass({ ... }) React.render(<App.List />, ...)
4. ? Will just pack everything
5. What we want = resolve dependencies Dead code
6. CommonJS :) module.exports = React.createClass({ ... }) var List = require('./list') React.render(<List />, ...)
7. Webpack == Just what we need
8. ★ CommonJS ★ AMD ★ ES6
9. Multiple entry points
10. /users /dashboard users-bundle.js dashboard-bundle.js
11. Entry points entry: { common: "./fe/ap/common.js", dashboard: "./fe/ap/dashboard.jsx", ... },
12. JSX JS ES6 Loaders Coffeescript
13. Loaders loaders: [ { test: /\.css/, loader: "style-loader!css-loader" }, { test: /\.jsx$/, loader: "jsx-loader?stripTypes" }, ...
14. CSS Code Images Fonts JS JSX ES6 Coffee Less Sass SVG Jpeg png eot ttf Templates
15. Loaders can have parameters Read JSX Remove Flow annotations Output JS { test: /\.jsx$/, loader: "jsx-loader?stripTypes" },
16. Loaders can be chained Convert LESS to CSS Loads CSS Inject CSS in document { test: /\.less$/, loader: 'style-loader!css-loader!less-loader' },
17. Interesting loaders ★ jsx loader ★ autoprefixer-loader
18. Images ★ base64 encoded ★ binary data as ASCII
19. Plug-ins
20. Operate on the entire bundles Interim bundles Source code Plug-ins Final bundles
21. Plug-ins, e.g. ★ Stats ★ Uglify ★ Dedupe ★ Write HTML ★ Localisations
22. Load on demand Split Chunk Chunk
23. On demand require.ensure(["foo", "bar"], function(require) { var foo = require("foo"); // ... }); load foo and bar on demand exec the rest
 when loaded
24. NPM integration ★ Install libs using NPM ★ Package.json for dependencies ★ Use NPM packages from your code
25. Using webpack ★ npm install webpack -g ★ Create webpack.config.js ★ Run a watcher
26. Watcher $ webpack --watch Only rebuilds touched files
27. Or dev server $ webpack-dev-server <script src="http://localhost:8080/webpack-dev- server.js"></script> <script src="http://localhost:8080/js/foo- bundle.js"></script>
28. Hot loader https://github.com/gaearon/react-hot-loader ★ Supposed to be great ★ I haven't used it yet
29. For production Webpack Source code Development bundles Deployment Pipeline Production bundles Sprockets
30. Dependency visualisation http://webpack.github.io/analyse/
31. Browserify? They do almost the same Plug-in based Batteries included
32. The bad parts: Documentation!
33. Resources ★ Official
 documentation == :( ★ https://github.com/ petehunt/webpack-howto ?
34. Webpack is brilliant Can do almost anything
35. Thanks!