Migrate the build to webpack 2.

.babelrc

@@ -1,6 +1,6 @@
 {
 	"presets": [
-		"es2015",
+		[ "es2015", { "modules": false } ],
 		"stage-1",
 		"react"
 	],

gulpfile.js

@@ -79,11 +79,7 @@ function onBuild( done ) {
 }
 
 function getWebpackConfig() {
-	// clone and extend webpackConfig
-	var config = Object.create( require( './webpack.config.js' ) );
-	config.debug = true;
-
-	return config;
+	return Object.create( require( './webpack.config.js' ) );
 }
 
 function doSass( done ) {
@@ -165,13 +161,7 @@ gulp.task( 'sass:watch', function() {
 } );
 
 gulp.task( 'react:build', function( done ) {
-	var config = getWebpackConfig();
-
-	if ( 'production' === process.env.NODE_ENV ) {
-		config.debug = false;
-	}
-
-	webpack( config ).run( onBuild( done ) );
+	webpack( getWebpackConfig() ).run( onBuild( done ) );
 } );
 
 gulp.task( 'react:watch', function() {

package.json

@@ -29,7 +29,7 @@
   "dependencies": {
     "@automattic/custom-colors-loader": "automattic/custom-colors-loader",
     "@automattic/dops-components": "automattic/dops-components",
-    "babel-core": "6.8.0",
+    "babel-core": "~6.13.0",
     "babel-eslint": "4.1.7",
     "babel-loader": "6.2.4",
     "babel-plugin-add-module-exports": "^0.2.1",
@@ -46,16 +46,15 @@
     "eslint": "1.7.3",
     "eslint-loader": "^1.1.0",
     "eslint-plugin-react": "3.6.3",
-    "extract-text-webpack-plugin": "0.9.1",
+    "extract-text-webpack-plugin": "~2.0.0-rc.1",
     "glotpress-js": "0.0.6",
     "grunt-cli": "^1.2.0",
     "gulp": "^3.9.0",
     "gulp-autoprefixer": "^3.0.2",
-    "gulp-babel": "^5.2.1",
     "gulp-banner": "^0.1.3",
     "gulp-browserstack": "^1.0.0",
     "gulp-check": "^0.1.1",
-    "gulp-clean-css": "^2.0.2",
+    "gulp-clean-css": "^3.0.0",
     "gulp-concat": "^2.6.0",
     "gulp-download-stream": "0.0.13",
     "gulp-jshint": "2.0.0",
@@ -81,7 +80,7 @@
     "jshint": "2.9.1",
     "jshint-stylish": "~2.1.0",
     "lodash": "^4.9.0",
-    "node-sass": "^3.7.0",
+    "node-sass": "^4.0.0",
     "react": "^0.14.7",
     "react-addons-test-utils": "^0.14.7",
     "react-dom": "0.14.3",
@@ -93,9 +92,9 @@
     "react-tap-event-plugin": "0.2.1",
     "redux": "^3.3.1",
     "redux-thunk": "^2.0.1",
-    "sass-loader": "3.1.2",
+    "sass-loader": "~5.0.0",
     "style-loader": "0.13",
-    "webpack": "1.12.9",
+    "webpack": "~2.2.1",
     "whatwg-fetch": "^1.0.0"
   },
   "devDependencies": {
@@ -114,7 +113,7 @@
     "sinon": "^1.17.3",
     "sinon-chai": "^2.8.0",
     "sinon-qunit": "~2.0.0",
-    "webpack-dev-server": "1.14.0"
+    "webpack-dev-server": "~2.3.0"
   },
   "engines": {
     "node": ">=5.11.1"

webpack.config.js

@@ -3,19 +3,11 @@ require( 'es6-promise' ).polyfill();
 var path = require( 'path' );
 var webpack = require( 'webpack' );
 var fs = require('fs');
-var NODE_ENV = process.env.NODE_ENV || 'development';
 var ExtractTextPlugin = require( 'extract-text-webpack-plugin' );
 
+var NODE_ENV = ( process.env.NODE_ENV || 'development' );
 var IS_HOT_UPDATE = ( process.env.NODE_ENV !== 'production' );
 
-var jsLoader = IS_HOT_UPDATE ?
-	[ require.resolve( 'react-hot-loader' ), require.resolve( 'babel-loader' ), require.resolve( 'eslint-loader' ) ] :
-	[ require.resolve( 'babel-loader' ), require.resolve( "eslint-loader" ) ];
-
-var cssLoader = IS_HOT_UPDATE ?
-	'style!css?sourceMap!autoprefixer!' :
-	ExtractTextPlugin.extract( 'css?sourceMap!autoprefixer!' );
-
 // This file is written in ES5 because it is run via Node.js and is not transpiled by babel. We want to support various versions of node, so it is best to not use any ES6 features even if newer versions support ES6 features out of the box.
 var webpackConfig = {
 
@@ -32,10 +24,24 @@ var webpackConfig = {
 	module: {
 
 		// Webpack loaders are applied when a resource is matches the test case
-		loaders: [
+		rules: [
+			{
+				test: /\.html/,
+				loader: 'html-loader'
+			},
 			{
 				test: /\.jsx?$/,
-				loaders: jsLoader,
+				loader: 'eslint-loader',
+				enforce: 'pre',
+				exclude: /node_modules/,
+				options: {
+					configFile: '.eslintrc',
+					failOnError: false,
+				}
+			},
+			{
+				test: /\.jsx?$/,
+				loader: 'babel-loader',
 
 				// include both typical npm-linked locations and default module locations to handle both cases
 				include: [
@@ -45,48 +51,50 @@ var webpackConfig = {
 					path.join( __dirname, './node_modules/@automattic/dops-components/client' )
 				]
 			},
-			{
-				test: /\.json$/,
-				loader: 'json-loader'
-			},
 			{
 				test: /\.css$/,
-				loader: cssLoader
-			},
-			{
-				test: /\.html$/,
-				loader: 'html-loader'
+				loader: ExtractTextPlugin.extract( {
+					use: [ 'css-loader?sourceMap!autoprefixer!' ]
+				} )
 			},
 			{
 				test: /\.scss$/,
-				loader: ExtractTextPlugin.extract( 'style-loader', 'css!sass' )
+				use: [{
+					loader: "style-loader"
+				}, {
+					loader: "css-loader"
+				}, {
+					loader: "sass-loader"
+				}]
 			}
 		]
 	},
 	resolve: {
-		extensions: [ '', '.js', '.jsx' ],
+		extensions: [ '.js', '.jsx' ],
 		alias: {
 			"react": path.join(__dirname, "/node_modules/react")
 		},
-		root: [
+		modules: [
 			path.resolve( __dirname, '_inc/client' ),
-			fs.realpathSync( path.join(__dirname, 'node_modules/@automattic/dops-components/client') )
+			fs.realpathSync( path.join(__dirname, 'node_modules/@automattic/dops-components/client') ),
+			'node_modules'
 		]
 	},
 	resolveLoader: {
-		root: path.join( __dirname, 'node_modules' )
+		modules: [
+			path.join( __dirname, 'node_modules' )
+		]
 	},
 	node: {
 		fs: "empty",
 		process: true
 	},
-	eslint: {
-		configFile: path.join(__dirname, '.eslintrc'),
-		quiet: true
-	},
 	plugins: [
+		new webpack.LoaderOptionsPlugin({
+			minimize: true,
+			debug: false
+		}),
 		new webpack.DefinePlugin({
-
 			// NODE_ENV is used inside React to enable/disable features that should only
 			// be used in development
 			'process.env': {
@@ -103,14 +111,4 @@ var webpackConfig = {
 	}
 };
 
-if ( NODE_ENV === 'production' ) {
-
-	webpack.DefinePlugin( {
-		"process.env": {
-			// This has effect on the react lib size
-			"NODE_ENV": JSON.stringify(process.env.NODE_ENV) // TODO switch depending on actual environment
-		}
-	} );
-}
-
 module.exports = webpackConfig;