[WIP] Upgrade to Webpack 2

.babelrc

@@ -1,6 +1,10 @@
 {
-  "presets": ["es2015", "stage-1", "react"],
+  "presets": [["es2015", { "modules": false }], "stage-1", "react"],
-  "plugins": ["lodash", ["babel-plugin-transform-builtin-extend", {
+  "plugins": [
+    "react-hot-loader/babel",
+    "lodash",
+    ["babel-plugin-transform-builtin-extend", {
       "globals": ["Error"]
-  }]]
+    }],
+  ]
 }

package.json

@@ -7,7 +7,7 @@
     "start": "webpack-dev-server -d --config webpack.dev.js",
     "test": "jest",
     "test:watch": "jest --watch",
-    "build": "NODE_ENV=production webpack --config webpack.prod.js",
+    "build": "NODE_ENV=production webpack --config webpack.prod.js --display-error-details",
     "build:scripts": "NODE_ENV=production webpack --config webpack.cli.js",
     "storybook": "start-storybook -p 9001",
     "storybook-build": "build-storybook -o dist",
@@ -52,42 +52,42 @@
     "babel-cli": "^6.18.0",
     "babel-core": "^6.5.1",
     "babel-jest": "^15.0.0",
-    "babel-loader": "^6.2.2",
+    "babel-loader": "^7.0.0",
     "babel-plugin-lodash": "^3.2.0",
     "babel-preset-es2015": "^6.5.0",
     "babel-preset-react": "^6.5.0",
     "babel-preset-stage-1": "^6.16.0",
     "babel-runtime": "^6.5.0",
-    "css-loader": "^0.23.1",
+    "css-loader": "^0.28.4",
     "enzyme": "^2.4.1",
     "eslint": "^3.7.1",
     "eslint-config-netlify": "github:netlify/eslint-config-netlify",
     "exports-loader": "^0.6.3",
-    "extract-text-webpack-plugin": "^1.0.1",
+    "extract-text-webpack-plugin": "^2.1.2",
-    "file-loader": "^0.8.5",
+    "file-loader": "^0.11.2",
     "identity-obj-proxy": "^3.0.0",
-    "imports-loader": "^0.6.5",
+    "imports-loader": "^0.7.1",
     "jest": "19.1.0-alpha.eed82034",
     "jest-cli": "19.1.0-alpha.eed82034",
     "lint-staged": "^3.1.0",
     "node-sass": "^3.10.0",
     "npm-check": "^5.2.3",
     "postcss-cssnext": "^2.7.0",
-    "postcss-import": "^8.1.2",
+    "postcss-import": "^10.0.0",
-    "postcss-loader": "^0.9.1",
+    "postcss-loader": "^2.0.5",
     "react-addons-test-utils": "^15.3.2",
-    "sass-loader": "^4.0.2",
+    "sass-loader": "^6.0.5",
-    "style-loader": "^0.13.0",
+    "style-loader": "^0.18.2",
     "stylefmt": "^4.3.1",
     "stylelint": "^7.3.1",
     "stylelint-config-css-modules": "^0.1.0",
     "stylelint-config-standard": "^13.0.2",
     "stylelint-declaration-block-order": "^0.1.0",
     "stylelint-declaration-use-variable": "^1.6.0",
-    "url-loader": "^0.5.7",
+    "url-loader": "^0.5.9",
-    "webpack": "^1.13.2",
+    "webpack": "^2.6.1",
-    "webpack-dev-server": "^1.15.1",
+    "webpack-dev-server": "^2.4.5",
-    "webpack-merge": "^0.14.1",
+    "webpack-merge": "^4.1.0",
     "webpack-postcss-tools": "^1.1.1"
   },
   "dependencies": {
@@ -135,7 +135,7 @@
     "react-datetime": "^2.6.0",
     "react-dom": "^15.1.0",
     "react-frame-component": "^1.0.3",
-    "react-hot-loader": "^3.0.0-beta.2",
+    "react-hot-loader": "^3.0.0-beta.7",
     "react-immutable-proptypes": "^2.1.0",
     "react-lazy-load": "^3.0.3",
     "react-portal": "^2.2.1",

postcss.config.js

@@ -0,0 +1,10 @@
+const webpack = require('webpack');
+
+module.exports = {
+  plugins: [
+    require('postcss-import')({ addDependencyTo: webpack }),
+    require('postcss-cssnext')({
+      browsers: ['last 2 versions', 'IE > 10'],
+    }),
+  ],
+};

src/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from 'react-dom';
 import { AppContainer } from 'react-hot-loader';
-import 'file?name=index.html!../example/index.html';
+import 'file-loader?name=index.html!../example/index.html';
 import 'react-toolbox/lib/commons.scss';
 import Root from './root';
 import registry from './lib/registry';
@@ -25,15 +25,8 @@ render((
   </AppContainer>
 ), el);
 
-if (process.env.NODE_ENV !== 'production' && module.hot) {
+if (module.hot) {
-  module.hot.accept('./root', () => {
+  module.hot.accept('./root', () => { render(Root); });
-    const NextRoot = require('./root').default; // eslint-disable-line
-    render((
-      <AppContainer>
-        <NextRoot />
-      </AppContainer>
-    ), el);
-  });
 }
 
 const buildtInPlugins = [{

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',
+        use: { loader: "url-loader", options: { limit: 10000 } },
-      },
-      {
-        test: /\.json$/,
-        loader: 'json-loader',
       },
     ],
   },
-  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

webpack.dev.js

@@ -10,9 +10,8 @@ const PORT = '8080';
 module.exports = merge.smart(require('./webpack.base.js'), {
   entry: {
     cms: [
-      'webpack/hot/dev-server',
-      `webpack-dev-server/client?http://${ HOST }:${ PORT }/`,
       'react-hot-loader/patch',
+      `webpack-dev-server/client?http://${ HOST }:${ PORT }/`,
       './index',
     ],
   },
@@ -33,7 +32,7 @@ module.exports = merge.smart(require('./webpack.base.js'), {
         test: /\.js?$/,
         exclude: /node_modules/,
         query: {
-          plugins: [path.resolve(__dirname, './node_modules/react-hot-loader/babel')]
+          plugins: [path.resolve(__dirname, './node_modules/react-hot-loader/babel')],
         },
       },
     ],
@@ -45,18 +44,20 @@ module.exports = merge.smart(require('./webpack.base.js'), {
       },
     }),
     new webpack.DefinePlugin({
-      NETLIFY_CMS_VERSION: JSON.stringify(require("./package.json").version + "-dev")
+      NETLIFY_CMS_VERSION: JSON.stringify(require("./package.json").version + "-dev"),
     }),
-    new webpack.optimize.OccurenceOrderPlugin(),
     new webpack.HotModuleReplacementPlugin(),
-    new webpack.NoErrorsPlugin(),
+    new webpack.NoEmitOnErrorsPlugin(),
-    new ExtractTextPlugin('[name].css', { disable: true }),
+    new ExtractTextPlugin({
+      filename: '[name].css',
+      disable: true,
+    }),
   ],
   devServer: {
     hot: true,
     contentBase: 'example/',
     historyApiFallback: true,
-    devTool: 'cheap-module-source-map',
+    // devTool: 'cheap-module-source-map',
     disableHostCheck: true,
     headers: {"Access-Control-Allow-Origin": "*"},
   },

webpack.prod.js

@@ -16,10 +16,16 @@ module.exports = merge.smart(require('./webpack.base.js'), {
     umdNamedDefine: true,
   },
   module: {
-    loaders: [
+    rules: [
       {
         test: /\.css$/,
-        loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1!postcss'), // Use minified class names on production
+        use: ExtractTextPlugin.extract({
+          fallback: 'style-loader',
+          use: [
+            { loader: 'css-loader', options: { modules: true, importLoaders: 1 } },
+            { loader: 'postcss-loader' },
+          ],
+        }), // Use minified class names on production
       },
     ],
   },
@@ -31,9 +37,8 @@ module.exports = merge.smart(require('./webpack.base.js'), {
       },
     }),
     new webpack.DefinePlugin({
-      NETLIFY_CMS_VERSION: JSON.stringify(require("./package.json").version)
+      NETLIFY_CMS_VERSION: JSON.stringify(require("./package.json").version),
     }),
-    new webpack.optimize.OccurenceOrderPlugin(),
 
     // Minify and optimize the JavaScript
     new webpack.optimize.UglifyJsPlugin({
@@ -44,7 +49,10 @@ module.exports = merge.smart(require('./webpack.base.js'), {
     }),
 
     // Extract CSS
-    new ExtractTextPlugin('[name].css', { allChunks: true }),
+    new ExtractTextPlugin({
+      filename: '[name].css',
+      allChunks: true
+    }),
 
     // During beta phase, generate source maps for better errors
     new webpack.SourceMapDevToolPlugin({