Add basic guide for using Webpack with ReactJS.NET

Author: Daniel15

README.md

@@ -17,6 +17,7 @@ Features
    libraries:
    * [ASP.NET Bundling and Minification](http://reactjs.net/guides/weboptimizer.html)
    * [Cassette](http://reactjs.net/guides/cassette.html)
+   * [Webpack](http://reactjs.net/guides/webpack.html)
  * [Server-side component rendering](http://reactjs.net/guides/server-side-rendering.html)
    to make your initial render super-fast (experimental!)
  * [Runs on Linux](http://reactjs.net/guides/mono.html) via Mono and V8

site/jekyll/guides/cassette.md

@@ -47,13 +47,8 @@ project for an example.
 Precompilation
 ==============
 
-**New in ReactJS.NET 0.2.0**
-
 Cassette supports using an MSBuild task to minify and combine your assets before
-deployment. This makes the start time of your application a lot quicker, and is
-also required to use JSX files on Linux via Mono (as the JSX transformer does
-not currently support Mono).
-
-Refer to the Cassette
+deployment. This makes the start time of your application a lot quicker. Refer
+to the Cassette
 [compile-time bundle generation using MSBuild](http://getcassette.net/documentation/v2/msbuild)
 documentation for more information.

site/jekyll/guides/webpack.md

@@ -0,0 +1,85 @@
+---
+layout: docs
+title: Webpack
+---
+
+[Webpack](http://webpack.github.io/docs/what-is-webpack.html) is a popular module bundling system built on top of Node.js. It can handle not only combination and minification of JavaScript and CSS files, but also other assets such as image files (spriting) through the use of plugins. Webpack can be used as an alternative to Cassette or ASP.NET Combination and Minification. This guide assumes you have already [installed Webpack](http://webpack.github.io/docs/installation.html).
+
+In order to use Webpack with ReactJS.NET's server-side rendering, it is suggested that you create a separate bundle ("[entry point](http://webpack.github.io/docs/multiple-entry-points.html)") containing *only* the code required to perform server-side rendering. Any components you would like to render server-side must be exposed globally so that ReactJS.NET can access them. This can be done through the [Webpack expose loader](https://github.com/webpack/expose-loader):
+
+```javascript
+// Content/components/index.js
+
+module.exports = {
+  // All the components you'd like to render server-side
+  Avatar: require('./Avatar'),
+  Comment: require('./Comment'),
+  CommentsBox: require('./CommentsBox')
+};
+```
+```javascript
+// Content/server.js
+
+// All JavaScript in here will be loaded server-side
+// Expose components globally so ReactJS.NET can use them
+var Components = require('expose?Components!./components');
+```
+
+The next step is to modify the `webpack.config.js` so that it creates a bundle from `Content/server.js`. A config similar to the following could work as a good starting point:
+
+```javascript
+var path = require('path');
+
+module.exports = {
+  context: path.join(__dirname, 'Content'),
+  entry: {
+    server: './server',
+    client: './client'
+  },
+  output: {
+    path: path.join(__dirname, 'build'),
+    filename: '[name].bundle.js'
+  },
+  module: {
+    loaders: [
+      // Transform JSX in .jsx files
+      { test: /\.jsx$/, loader: 'jsx-loader?harmony' }
+    ],
+  },
+  resolve: {
+    // Allow require('./blah') to require blah.jsx
+    extensions: ['', '.js', '.jsx']
+  },
+  externals: {
+    // Use external version of React (from CDN for client-side, or
+    // bundled with ReactJS.NET for server-side)
+    react: 'React'
+  }
+};
+```
+
+This configuration uses two entry points (`Content/server.js` for the server side and `Content/client.js` for the client side) and will create two bundles (`build/server.bundle.js` and `build/client.bundle.js` respectively). Your configuration may be more complex, but generally you should only have a single bundle with all the code required for server-side rendering.
+
+Our configuration also requires installation of the "expose" and "jsx" loaders:
+
+```
+npm install --save-dev expose-loader
+npm install --save-dev jsx-loader
+```
+
+Once Webpack has been configured, run `webpack` to build the bundles. Once you have verified that the bundle is being created correctly, you can modify your ReactJS.NET configuration (normally `App_Start\ReactConfig.cs`) to load the newly-created bundle:
+
+```csharp
+ReactSiteConfiguration.Configuration
+  .AddScript("~/build/server.bundle.js");
+```
+
+This will load all your components into the `Components` global, which can be used from `Html.React` to render any of the components:
+
+```csharp
+@Html.React("Components.CommentsBox", new {
+  initialComments = Model.Comments
+})
+```
+
+A full example is available in [the ReactJS.NET repository](https://github.com/reactjs/React.NET/tree/master/src/React.Sample.Webpack).

site/jekyll/index.md

@@ -70,6 +70,11 @@ var HelloWorld = React.createClass({
             Reference your JSX files and they will be included in your bundles
             along with your other JavaScript files.
           </p>
+          <p>
+            If you're a fan of Node.js-based libraries, you can use
+            [Webpack](/guides/webpack.html) or Browserify instead, and still
+            take advantage of ReactJS.NET's server-side rendering.
+          </p>
         </div>
         <div class="example-code">