How does it work

Compilation with webpack

• package.json scripts
• webpack-dev-server.config.js, webpack-hot-dev-server.config.js, webpack-production.config.js
• make-webpack-config.js

React and jsx

• react via npm => package.json
• jsx-loader => make-webpack-config.js loaders

react-router

• react-router via npm => package.json
• Client-Side
  • config/app.jsx
  • 1. Router.run 2. chargeStores with timeout 3. React.render
• Prerendering
  • config/prerender.jsx
  • 1. Router.run 2. chargeStores 3. React.renderToString 4. generate HTML

Stylesheets

• Loaders configured in make-webpack-config.js
• Development
  • style-loader
  • Why? It's fast and easy.
• Production
  • ExtractTextPlugin => [name].css
  • in additional chunks: style-loader
  • Why? With prerendering you need this to avoid FOUC. On demand loaded stuff doesn't need it and we include CSS in JS chunk to save requests.
• Prerendering
  • null-loader
  • Why? There is no DOM. We cannot run the style-loader

Embedded resources

• url-loader and file-loader configured in make-webpack-config.js
• Required resources are either embeddes as DataUrl or copied to the output directory.
• Why? Easy to handle for the developer. DataUrls save requests and roundtrips.

react components on demand

• react-proxy-loader
• uses Code Splitting
• Why? You want to keep the initial download small in big applications. You don't need this in small applications.

Developement server

• webpack-dev-server in package.json
• Hot Module Replacement
  • see react-hot-loader
  • style-loader replaces CSS
• devtool: "eval" for performance
• Why? Speeds up development.

Long Term Caching

• Hashes are added to output.filename, CommonsChunkPlugin and ExtractTextPlugin
• file-loader uses hashes by default.
• see make-webpack-config.js
• Why? All assets can be cached forever.

Minimizing

• JS: UglifyJSPlugin
• CSS: css-loader minimizes
• Why? To reduce the download time

coffee-script, markdown, etc.

• Loaders preconfigured in make-webpack-config.js
• Loader need to be installed when used.
• Why? The configuration does cost anything. They are not installed because this would be expensive even for users that doesn't use xxx.