Webpack is a great fit for React.js applications, this decks explains the major features of Webpack
Webpack@sebasporto
View Slide
ReactComponents
Globals :(App.List = React.createClass({...})React.render(, ...)
?Will just pack everything
What we want =resolve dependenciesDead code
CommonJS :)module.exports = React.createClass({...})var List = require('./list')React.render(, ...)
Webpack == Just what we need
★ CommonJS★ AMD★ ES6
Multiple entry points
/users /dashboardusers-bundle.js dashboard-bundle.js
Entry pointsentry: {common: "./fe/ap/common.js",dashboard: "./fe/ap/dashboard.jsx",...},
JSXJSES6LoadersCoffeescript
Loadersloaders: [{ test: /\.css/,loader: "style-loader!css-loader" },{ test: /\.jsx$/,loader: "jsx-loader?stripTypes" },...
CSSCodeImagesFontsJSJSXES6CoffeeLessSassSVGJpegpngeotttfTemplates
Loaders can haveparametersRead JSXRemove Flow annotationsOutput JS{ test: /\.jsx$/,loader: "jsx-loader?stripTypes" },
Loaders canbe chainedConvert LESS to CSSLoads CSSInject CSS in document{ test: /\.less$/,loader: 'style-loader!css-loader!less-loader' },
Interesting loaders★ jsx loader★ autoprefixer-loader
Images★ base64 encoded★ binary data as ASCII
Plug-ins
Operate on the entirebundlesInterim bundlesSource codePlug-insFinal bundles
Plug-ins, e.g.★ Stats★ Uglify★ Dedupe★ Write HTML★ Localisations
Load ondemandSplitChunkChunk
On demandrequire.ensure(["foo", "bar"], function(require) {var foo = require("foo");// ...});load foo and baron demandexec the rest when loaded
NPM integration★ Install libs using NPM★ Package.json for dependencies★ Use NPM packages from your code
Using webpack★ npm install webpack -g★ Create webpack.config.js★ Run a watcher
Watcher$ webpack --watchOnly rebuilds touched files
Or dev server$ webpack-dev-server
Hot loaderhttps://github.com/gaearon/react-hot-loader★ Supposed to be great★ I haven't used it yet
For productionWebpackSource codeDevelopment bundlesDeployment PipelineProduction bundlesSprockets
Dependencyvisualisationhttp://webpack.github.io/analyse/
Browserify?They do almost the samePlug-in basedBatteries included
The bad parts:Documentation!
Resources★ Official documentation == :(★ https://github.com/petehunt/webpack-howto?
Webpack is brilliantCan do almost anything
Thanks!