[WIP] Upgrade to Webpack 2

webpack.base.js

@@ -1,14 +1,15 @@
 /* eslint global-require: 0 */
 
 const webpack = require('webpack');
+const path = require('path');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 
 module.exports = {
   module: {
-    loaders: [
+    rules: [
       {
-        loader: 'babel',
         test: /\.js?$/,
+        use: 'babel-loader',
         exclude: /node_modules/,
       },
       {
@@ -17,40 +18,52 @@ module.exports = {
         */
         test: /\.css$/,
         include: [/redux-notifications/],
-        loader: ExtractTextPlugin.extract('style', 'css'),
+        use: ExtractTextPlugin.extract({
+          fallback: 'style-loader',
+          use: 'css-loader',
+        }),
       },
       {
         /* React-toolbox still relies on SCSS and css-modules */
         test: /\.scss$/,
         include: [/react-toolbox/],
-        loader: ExtractTextPlugin.extract('style', 'css?modules!sass'),
+        use: ExtractTextPlugin.extract({
+          fallback: 'style-loader',
+          use: [
+            { loader: "css-loader", options: { modules: true } },
+            "sass-loader",
+          ],
+        }),
       },
       {
         /* We use CSS-modules and PostCSS for CMS styles */
         test: /\.css$/,
         exclude: /node_modules/,
-        loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1&&localIdentName=cms__[name]__[local]!postcss'),
+        use: ExtractTextPlugin.extract({
+          fallback: 'style-loader',
+          use: [
+            {
+              loader: 'css-loader',
+              options: {
+                modules: true,
+                importLoaders: 1,
+                localIdentName: "cms__[name]__[local]"
+              },
+            },
+            { loader: 'postcss-loader' },
+          ],
+        }),
       },
       {
         test: /\.(png|eot|woff|woff2|ttf|svg|gif)(\?v=\d+\.\d+\.\d+)?$/,
-        loader: 'url-loader?limit=10000',
-      },
-      {
-        test: /\.json$/,
-        loader: 'json-loader',
+        use: { loader: "url-loader", options: { limit: 10000 } },
       },
     ],
   },
-  postcss: [
-    require('postcss-import')({ addDependencyTo: webpack }),
-    require('postcss-cssnext')({
-      browsers: ['last 2 versions', 'IE > 10'],
-    }),
-  ],
   plugins: [
     new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/), // Ignore all optional deps of moment.js
     new webpack.ProvidePlugin({
-      fetch: 'imports?this=>global!exports?global.fetch!whatwg-fetch',
+      fetch: 'imports-loader?this=>global!exports-loader?global.fetch!whatwg-fetch',
     }),
   ],
   target: 'web', // Make web variables accessible to webpack, e.g. window