Upgrade to Webpack2.

Also switches TypeScript to emit ES2015 modules instead of CommonJS
so we can take advantage of tree shaking to reduce bundle sizes.
The gains here are barely noticeable though (there's an outstanding
issue with how TypeScript emits classes and how Uglify interacts
with that that may help once that's fixed), but every little bit
helps.

mishoo/UglifyJS#1261
microsoft/TypeScript#13721
webpack/webpack#2899

TODO: Look to see if we can convert more of our more imports to
ES2015 to impove tree shaking.

Author: fongandrew

package.json

@@ -25,31 +25,31 @@
     "autoprefixer": "^6.6.1",
     "chai": "^3.5.0",
     "copy-webpack-plugin": "^4.0.1",
-    "css-loader": "^0.23.1",
+    "css-loader": "^0.26.2",
     "enzyme": "^2.7.0",
-    "extract-text-webpack-plugin": "^1.0.1",
+    "extract-text-webpack-plugin": "^2.1.0",
     "file-loader": "^0.9.0",
     "jsdom": "^9.9.1",
     "json-loader": "^0.5.4",
     "less": "^2.7.2",
     "less-loader": "^2.2.3",
     "mime": "^1.3.4",
     "mocha": "^2.5.3",
-    "nunjucks-html-loader": "^1.0.0",
+    "nunjucks-html-loader": "^1.1.0",
     "postcss-loader": "^0.9.1",
     "react-addons-test-utils": "^15.3.2",
     "sinon": "^1.17.7",
     "source-map-loader": "^0.1.5",
-    "style-loader": "^0.13.1",
+    "style-loader": "^0.13.2",
     "sync-exec": "^0.6.2",
-    "ts-loader": "^1.3.2",
-    "ts-node": "^2.0.0",
+    "ts-loader": "^2.0.1",
+    "ts-node": "^2.1.0",
     "typescript": "^2.2.1",
     "util-inspect": "^0.1.8",
-    "webpack": "^1.13.1",
-    "webpack-dev-server": "^1.14.1",
+    "webpack": "^2.2.1",
+    "webpack-dev-server": "^2.4.1",
     "webpack-path-rewriter": "^1.1.4",
-    "worker-loader": "^0.7.1"
+    "worker-loader": "^0.8.0"
   },
   "dependencies": {
     "autoprefixer": "^6.7.6",

test-helpers/init.ts

@@ -33,4 +33,4 @@ function createDOM() {
   } as any;
 }
 
-export = createDOM();
+export default createDOM();

ts/components/Waypoint.ts

@@ -1,5 +1,8 @@
 /*
   Wraps react-waypoint module in proper ES6 form
 */
-import Waypoint = require('react-waypoint');
+
+// Technically incorrect per ES6 standard but builds with Webpack transpiler
+import * as Waypoint from 'react-waypoint';
+
 export default Waypoint;

ts/tasks/tsconfig.json

@@ -11,7 +11,8 @@
     "noFallthroughCasesInSwitch": true,
     "noUnusedLocals": true,
     "strictNullChecks": true,
-    "module": "commonjs",
+    "module": "es2015",
+    "moduleResolution": "node",
     "target": "es5",
     "typeRoots" : ["../../typings", "../../node_modules/@types"],
     "jsx": "react",

tsconfig.json

@@ -11,7 +11,8 @@
     "noFallthroughCasesInSwitch": true,
     "noUnusedLocals": true,
     "strictNullChecks": true,
-    "module": "commonjs",
+    "module": "es2015",
+    "moduleResolution": "node",
     "target": "es5",
     "typeRoots" : ["./typings", "./node_modules/@types"],
     "jsx": "react",

webpack.config.js

@@ -63,7 +63,7 @@ var config = {
 
   resolve: {
     // Add '.ts' and '.tsx' as resolvable extensions.
-    extensions: ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js", ".json"],
+    extensions: [".ts", ".tsx", ".js", ".jsx", ".json"],
 
     alias: {
       // Special config path based on environment
@@ -72,13 +72,13 @@ var config = {
   },
 
   module: {
-    loaders: [
+    rules: [
       { test: /\.html?$/,
         loader: PathRewriterPlugin.rewriteAndEmit({
           name: "[path][name]",
           context: "html",
           includeHash: true,
-          loader: 'nunjucks-html?' + JSON.stringify({
+          loader: 'nunjucks-html-loader?' + JSON.stringify({
             searchPaths: [ path.join(__dirname, "html") ],
 
             // Nunjucks / Jinja context
@@ -90,46 +90,66 @@ var config = {
         })
       },
 
-      { test: /\.less?$/,
-        loader: ExtractTextPlugin.extract("style-loader",
-          "css?" + (prodLike ? "minimize" : "") + "sourceMap" +
-          "!postcss?sourceMap" +
-          "!less?sourceMap"
-        )
-      },
-
-      { test: /\.css?$/,
-        loader: ExtractTextPlugin.extract("style-loader",
-          "css?" + (prodLike ? "minimize" : "") + "sourceMap" +
-          "!postcss?sourceMap"
-        )
-      },
-
-      { test: /\.tsx?$/,
-        loader: "ts-loader",
-        exclude: [/\.(test)\.tsx?$/] },
-
-      { test: /\.json$/, loader: "json-loader" },
+      // CSS / LESS
+      { test: /(\.css|\.less)$/,
+        loader: ExtractTextPlugin.extract({
+          fallback: "style-loader",
+          use: [{
+            loader: "css-loader",
+            options: {
+              minimize: prodLike,
+              sourceMap: true
+            }
+          }, {
+            loader: 'postcss-loader',
+            options: {
+              plugins: function () { return [autoprefixer({
+                browsers: ['last 3 versions']
+              })]; },
+              sourceMap: true
+            }
+          }, {
+            loader: 'less-loader',
+            options: { sourceMap: true }
+          }]
+        }) },
+
+      // TypeScript
+      { test: /\.ts(x?)$/,
+       exclude: /node_modules/,
+       use: [{
+         loader: 'ts-loader',
+         options: { sourceMap: true }
+       }] },
 
       // Static assets
       { test: /.*/,
-        loader: "file?context=assets&name=[path][name].[ext]",
+        use: [{
+          loader: 'file-loader',
+          options: {
+            context: "assets",
+            name: "[path][name].[ext]"
+          }
+        }],
         include: [ path.resolve(__dirname, "./assets") ]
         // exclude: /\.html$/
       },
 
       { test: /\.(woff|woff2|eot|ttf|svg)(\?.*)?$/,
-        loader: "file?context=node_modules&name=fonts/[name].[ext]",
+        use: [{
+          loader: 'file-loader',
+          options: {
+            context: "node_modules",
+            name: "fonts/[name].[ext]"
+          }
+        }],
         include: [ path.resolve(__dirname, "./node_modules") ]
-      }
-    ],
+      },
 
-    preLoaders: [
-      /*
-        All output '.js' files will have any sourcemaps re-processed by
-        'source-map-loader'.
-      */
-      { test: /\.js$/, loader: "source-map-loader" }
+      // Source map extraction
+      { test: /\.js$/,
+        use: ["source-map-loader"],
+        enforce: "pre" }
     ]
   },
 
@@ -147,35 +167,40 @@ var config = {
       }
     }),
 
-    new ExtractTextPlugin(
-      "css/[name]--" + (prodLike ? "[contenthash]" : "dev") + ".css",
-      { allChunks: true }),
+    new ExtractTextPlugin({
+      filename: "css/[name]--" + (prodLike ? "[contenthash]" : "dev") + ".css",
+      allChunks: true
+    }),
+
     new webpack.optimize.CommonsChunkPlugin({
       name: "vendor",
       filename: "js/[name]--" + (prodLike ? "[chunkhash]" : "dev") + ".js"
     }),
+
     new PathRewriterPlugin()
   ],
 
-  postcss: function () {
-    return [autoprefixer({
-      browsers: ['last 3 versions']
-    })];
-  },
-
   devServer: {
     historyApiFallback: true
-  },
+  }
+};
 
-  worker: {
-    output: {
-      filename: "js/[name].worker--" +
-        (prodLike ? "[chunkhash]" : "dev") + ".js",
-      chunkFilename: "js/[name].worker--" +
-        (prodLike ? "[chunkhash]" : "dev") + ".js"
+// Back-compat config
+config.plugins.push(new webpack.LoaderOptionsPlugin({
+  options: {
+    context: '/',
+    output: config.output,
+    worker: {
+      output: {
+        filename: "js/[name].worker--" +
+          (prodLike ? "[chunkhash]" : "dev") + ".js",
+        chunkFilename: "js/[name].worker--" +
+          (prodLike ? "[chunkhash]" : "dev") + ".js"
+      }
     }
   }
-};
+}));
+
 
 if (! prodLike) {
   /*
@@ -194,6 +219,9 @@ if (! prodLike) {
 
 if (prodLike) {
   config.plugins.push(new webpack.optimize.UglifyJsPlugin({
+    screw_ie8: true,
+    sourceMap: true,
+
     // Disable warnings about un-reachable conditions and what not. Most
     // of those are intentional (e.g. via webpack.DefinePlugin)
     compress: {warnings: false}