Merge pull request #9 from christianalfoni/master

fakefish · fakefish · commit b6d22d759b97 · 2015-11-17T17:07:29.000+08:00
update
diff --git a/content/Automatic-browser-refresh.md b/content/Automatic-browser-refresh.md
@@ -1,6 +1,6 @@
 When **webpack-dev-server** is running it will watch your files for changes. When that happens it rebundles your project and notifies browsers listening to refresh. To trigger this behavior you need to change your *index.html* file in the `build/` folder.
 
-*build/index.html*
+**build/index.html**
 
 ```html
 <!DOCTYPE html>
@@ -9,21 +9,24 @@ When **webpack-dev-server** is running it will watch your files for changes. Whe
     <meta charset="UTF-8"/>
   </head>
   <body>
-    <script src="http://localhost:8080/webpack-dev-server.js"></script>
     <script src="bundle.js"></script>
   </body>
 </html>
 ```
 
 We added a script that refreshes the application when a change occurs. You will also need to add an entry point to your configuration:
 
-*webpack.config.js*
+**webpack.config.js**
 
 ```javascript
 var path = require('path');
 
 module.exports = {
-    entry: ['webpack/hot/dev-server', path.resolve(__dirname, 'app/main.js')],
+    entry: [
+      'webpack/hot/dev-server',
+      'webpack-dev-server/client?http://localhost:8080',
+      path.resolve(__dirname, 'app/main.js')
+    ],
     output: {
         path: path.resolve(__dirname, 'build'),
         filename: 'bundle.js',
@@ -34,4 +37,7 @@ module.exports = {
 Thats it! Now your application will automatically refresh on file changes.
 
 ## Default environment
-In the example above we created our own *index.html* file to give more freedom and control. It is also possible to run the application from **http://localhost:8080/webpack-dev-server/bundle**. This will fire up a default *index.html* file that you do not control. It also fires this file up in an iFrame allowing for a status bar to indicate the status of the rebundling process.
+
+In the example above we created our own *index.html* file to give more freedom and control. It is also possible to run the application from **http://localhost:8080/webpack-dev-server/bundle**. This will fire up a default *index.html* file that you do not control. It also fires this file up in an iFrame allowing for a status bar to indicate the status of the rebundling process.
+
+> I discuss an alternative, `inline` based approach at the [Developing with Webpack](http://survivejs.com/webpack_react/developing_with_webpack/) chapter of *SurviveJS - Webpack and React*.
diff --git a/content/Optimizing-rebundling.md b/content/Optimizing-rebundling.md
@@ -1,9 +1,13 @@
 You might notice after requiring React JS into your project that the time it takes from a save to a finished rebundle of your application takes more time. In development you ideally want from 200-800 ms rebundle speed, depending on what part of the application you are working on.
 
+> IMPORTANT! This setup a minified, production version of React. As a result you will lose `propTypes` based type validation!
+
 ## Running minified file in development
+
 Instead of making Webpack go through React JS and all its dependencies, you can override the behavior in development.
 
-*webpack.config.js*
+**webpack.config.js**
+
 ```javascript
 var path = require('path');
 var node_modules = path.resolve(__dirname, 'node_modules');
@@ -12,25 +16,26 @@ var pathToReact = path.resolve(node_modules, 'react/dist/react.min.js');
 config = {
     entry: ['webpack/hot/dev-server', path.resolve(__dirname, 'app/main.js')],
     resolve: {
-	    alias: {
-	      'react': pathToReact
-	    }
-	},
+        alias: {
+          'react': pathToReact
+        }
+    },
     output: {
         path: path.resolve(__dirname, 'build'),
         filename: 'bundle.js',
     },
     module: {
-    	loaders: [{
-    		test: /\.jsx?$/,
-    		loader: 'babel'
-    	}],
-    	noParse: [pathToReact]
-    }    
+        loaders: [{
+            test: /\.jsx?$/,
+            loader: 'babel'
+        }],
+        noParse: [pathToReact]
+    }
 };
 
 module.exports = config;
 ```
+
 We do two things in this configuration:
 
 1. Whenever "react" is required in the code it will fetch the minified React JS file instead of going to *node_modules*
