Updated to the latest webpack and babel

Author: grgur

.babelrc

@@ -1,4 +1,4 @@
 {
-  "presets": ["es2015-native-modules", "react"],
+  "presets": [["es2015", { "modules": false }], "react"],
   "plugins": ["transform-runtime"]
 }

build.js

@@ -1,7 +1,8 @@
 /* eslint no-var: 0 */
 var exec = require('child_process').exec;
 
-var cmdLine = './node_modules/.bin/webpack --progress';
+var executable = (!process.argv[3].indexOf('server')) ? 'webpack-dev-server' : 'webpack';
+var cmdLine = './node_modules/.bin/' + executable;
 var environ = (!process.argv[2].indexOf('development')) ? 'development' : 'production';
 var command;
 

package.json

@@ -6,30 +6,31 @@
   "author": "Grgur Grisogono",
   "main": "index.js",
   "scripts": {
-    "start": "./node_modules/.bin/webpack-dev-server --history-api-fallback --hot --progress --port 3000",
-    "build": "node build.js production"
+    "start": "webpack-dev-server --config webpack.config.js",
+    "prod": "node build.js production server",
+    "build": "node build.js production filesystem"
   },
   "license": "MIT",
   "devDependencies": {
-    "babel-core": "^6.6.5",
-    "babel-loader": "^6.2.4",
-    "babel-plugin-transform-runtime": "^6.6.0",
-    "babel-preset-es2015-native-modules": "^6.6.0",
-    "babel-preset-react": "^6.5.0",
-    "css-loader": "^0.23.1",
-    "extract-text-webpack-plugin": "^2.0.0-beta.3",
+    "babel-core": "^6.16.0",
+    "babel-loader": "^6.2.7",
+    "babel-plugin-transform-runtime": "^6.15.0",
+    "babel-preset-es2015": "^6.18.0",
+    "babel-preset-react": "^6.15.0",
+    "css-loader": "0.14.5",
+    "extract-text-webpack-plugin": "^2.0.0-beta.4",
     "file-loader": "^0.8.5",
-    "node-sass": "^3.5.0-beta.1",
-    "sass-loader": "^3.1.2",
-    "style-loader": "^0.13.0",
+    "node-sass": "^3.12.2",
+    "sass-loader": "^4",
+    "style-loader": "^0.13.1",
     "webpack": "^2.1.0-beta.4",
-    "webpack-dev-server": "^2.0.0-beta"
+    "webpack-dev-server": "^2.1.0-beta.10"
   },
   "dependencies": {
-    "babel-polyfill": "^6.6.1",
-    "babel-runtime": "^6.6.1",
-    "react": "^15.0.0-rc.1",
-    "react-dom": "^15.0.0-rc.1",
-    "react-router": "^2.0.0"
+    "babel-polyfill": "^6.16.0",
+    "babel-runtime": "^6.16.0",
+    "react": "^15.3.0",
+    "react-dom": "^15.3.0",
+    "react-router": "^2.8.0"
   }
 }

webpack.config.js

@@ -4,11 +4,53 @@ const ExtractTextPlugin = require('extract-text-webpack-plugin');
 
 const nodeEnv = process.env.NODE_ENV || 'development';
 const isProd = nodeEnv === 'production';
-let extractCSS = new ExtractTextPlugin('style.css');
+
+const sourcePath = path.join(__dirname, './client');
+const staticsPath = path.join(__dirname, './static');
+
+const extractCSS = new ExtractTextPlugin('style.css');
+
+const plugins = [
+  new webpack.optimize.CommonsChunkPlugin({
+    name: 'vendor',
+    minChunks: Infinity,
+    filename: 'vendor.bundle.js'
+  }),
+  new webpack.DefinePlugin({
+    'process.env': { NODE_ENV: JSON.stringify(nodeEnv) }
+  }),
+];
+
+if (isProd) {
+  plugins.push(
+    new webpack.LoaderOptionsPlugin({
+      minimize: true,
+      debug: false
+    }),
+    new webpack.optimize.UglifyJsPlugin({
+      compress: {
+        warnings: false,
+        screw_ie8: true,
+        conditionals: true,
+        unused: true,
+        comparisons: true,
+        sequences: true,
+        dead_code: true,
+        evaluate: true,
+        if_return: true,
+        join_vars: true,
+      },
+      output: {
+        comments: false
+      },
+    }),
+    extractCSS
+  );
+}
 
 module.exports = {
-  devtool: isProd ? 'hidden-source-map' : 'cheap-eval-source-map',
-  context: path.join(__dirname, './client'),
+  devtool: isProd ? 'source-map' : 'eval',
+  context: sourcePath,
   entry: {
     js: [
       'index',
@@ -20,29 +62,34 @@ module.exports = {
     ]
   },
   output: {
-    path: path.join(__dirname, './static'),
+    path: staticsPath,
     filename: 'bundle.js',
     publicPath: '/',
   },
   module: {
-    loaders: [
+    rules: [
       {
         test: /\.html$/,
-        loader: 'file',
+        loader: 'file-loader',
         query: {
           name: '[name].[ext]'
         }
       },
       {
         test: /\.scss$/,
-        loaders: extractCSS.extract(['css','sass'])
+        loaders: isProd ?
+          extractCSS.extract({
+            fallbackLoader: 'style-loader',
+            loader: ['css-loader', 'sass-loader'],
+          }) :
+          ['style-loader', 'css-loader', 'sass-loader']
       },
       {
         test: /\.(js|jsx)$/,
         exclude: /node_modules/,
         loaders: [
           {
-            loader: 'babel',
+            loader: 'babel-loader',
             query: {
               cacheDirectory: true
             }
@@ -51,43 +98,24 @@ module.exports = {
       },
       {
         test: /\.(gif|png|jpg|jpeg\ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
-        loader: 'file'
+        loader: 'file-loader'
       }
     ],
   },
   resolve: {
-    extensions: ['', '.js', '.jsx'],
+    extensions: ['.js', '.jsx'],
     modules: [
-      path.resolve('./client'),
+      sourcePath,
       'node_modules'
     ]
   },
-  plugins: [
-    new webpack.optimize.CommonsChunkPlugin({
-      name: 'vendor',
-      minChunks: Infinity,
-      filename: 'vendor.bundle.js'
-    }),
-    new webpack.LoaderOptionsPlugin({
-      minimize: true,
-      debug: false
-    }),
-    new webpack.optimize.UglifyJsPlugin({
-      compress: {
-        warnings: false
-      },
-      output: {
-        comments: false
-      },
-      sourceMap: false
-    }),
-    new webpack.DefinePlugin({
-      'process.env': { NODE_ENV: JSON.stringify(nodeEnv) }
-    }),
-    extractCSS,
-  ],
+  plugins: plugins,
   devServer: {
     contentBase: './client',
-    noInfo: true
+    historyApiFallback: true,
+    inject: true,
+    port: 3000,
+    compress: isProd,
+    stats: { colors: true },
   }
 };