webpack2 setup.

Author: gajus

.babelrc

@@ -1,3 +1,7 @@
 {
-    "stage": 0
+    "presets": [
+        "es2015",
+        "stage-0",
+        "react"
+    ]
 }

doc/fail_in_safari.png

@@ -1,22 +1,23 @@
 {
   "private": true,
+  "scripts": {
+    "start": "webpack-dev-server"
+  },
   "devDependencies": {
-    "babel-core": "^5.8.29",
-    "babel-loader": "^5.3.2",
-    "browser-sync": "^2.9.11",
-    "css-loader": "^0.21.0",
-    "extract-text-webpack-plugin": "^0.8.2",
-    "react-hot-loader": "^1.3.0",
+    "babel-core": "^6.4.5",
+    "babel-loader": "^6.2.1",
+    "babel-preset-es2015": "^6.3.13",
+    "babel-preset-react": "^6.3.13",
+    "babel-preset-stage-0": "^6.3.13",
+    "css-loader": "^0.23.1",
+    "extract-text-webpack-plugin": "^1.0.1",
     "style-loader": "^0.13.0",
-    "webpack": "^1.12.2",
-    "webpack-dev-middleware": "^1.2.0",
-    "webpack-dev-server": "^1.12.1",
-    "webpack-hot-middleware": "^2.4.1",
-    "write-file-webpack-plugin": "^1.0.0"
+    "webpack": "^2.0.6-beta",
+    "webpack-dev-server": "^2.0.0-beta"
   },
   "dependencies": {
-    "react": "^0.14.0",
-    "react-css-modules": "^3.6.1",
-    "react-dom": "^0.14.0"
+    "react": "^0.15.0-alpha.1",
+    "react-css-modules": "^3.7.4",
+    "react-dom": "^0.15.0-alpha.1"
   }
 }

doc/works_with_devtools_open.png

@@ -2,22 +2,21 @@ import React from 'react';
 import CSSModules from 'react-css-modules';
 import styles from './../table.css';
 
-class Table extends React.Component {
+let Table;
 
+Table = class extends React.Component {
     constructor(props) {
+        super(props);
 
-      super(props);
+        this.state = {
+            count: 0
+        };
 
-      this.state = {
-          count: 0
-      };
-
-      // force updates in the component to break safari
-      setInterval(() => {
-        this.setState({
-            count: this.state.count + 1
-        });
-      })
+        setInterval(() => {
+            this.setState({
+                count: this.state.count + 1
+            });
+        }, 10);
     }
 
     render () {

package.json

@@ -2,22 +2,21 @@ import React from 'react';
 import CSSModules from 'react-css-modules';
 import styles from './../table.css';
 
-class Table extends React.Component {
+let Table;
 
-    constructor(props) {
+Table = class extends React.Component {
+    constructor (props) {
+        super(props);
 
-      super(props);
+        this.state = {
+            count: 0
+        };
 
-      this.state = {
-          count: 0
-      };
-
-      // force updates in the component to break safari
-      setInterval(() => {
-        this.setState({
-            count: this.state.count + 1
+        setInterval(() => {
+            this.setState({
+                count: this.state.count + 1
+            });
         });
-      })
     }
 
     render () {

src/UsingDecorator/index.js

@@ -1,15 +1,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-
 import UsingStyleName from './UsingStyleName';
-
 import UsingStylesProperty from './UsingStylesProperty';
 import UsingStylesPropertyStyles from './UsingStylesProperty/custom.css';
 
-import UsingDecorator from './UsingDecorator';
-
 ReactDOM.render(<div>
     <UsingStyleName />
     <UsingStylesProperty styles={UsingStylesPropertyStyles} />
-    <UsingDecorator />
 </div>, document.querySelector('#app'));

src/UsingStyleName/index.js

@@ -15,20 +15,19 @@ devServer = {
     publicPath: '/static/',
     historyApiFallback: false,
     host: '127.0.0.1',
+    lazy: true,
     port: 8000,
-    hot: true
+    hot: false
 };
 
 module.exports = {
-    devtool: 'source-map',
+    devtool: 'source-source-map',
     debug: true,
     devServer: devServer,
     context: path.resolve(__dirname, './src'),
     entry: {
         app: [
             'webpack-dev-server/client?http://' + devServer.host + ':' + devServer.port,
-            'webpack/hot/only-dev-server',
-
             './'
         ]
     },
@@ -41,9 +40,6 @@ module.exports = {
         new ExtractTextPlugin('app.css', {
             allChunks: true
         }),
-        new webpack.optimize.OccurenceOrderPlugin(),
-        new webpack.HotModuleReplacementPlugin(),
-        new webpack.OldWatchingPlugin(),
         new webpack.NoErrorsPlugin()
     ],
     module: {
@@ -56,7 +52,6 @@ module.exports = {
                 test: /\.js$/,
                 include: path.resolve(__dirname, './src'),
                 loaders: [
-                    'react-hot',
                     'babel'
                 ]
             }