Upgrade to Webpack 4

.babelrc

@@ -33,7 +33,8 @@
     }],
     "transform-export-extensions",
     "transform-class-properties",
-    "transform-object-rest-spread"
+    "transform-object-rest-spread",
+    "react-hot-loader/babel",
   ],
   "env": {
     "test": {

.eslintrc

@@ -4,9 +4,7 @@
   ],
   "settings": {
     "import/resolver": {
-      "webpack": {
-        "config": "webpack.dev.js"
-      }
+      "babel-module": {}
     }
   },
   "globals": {

package.json

@@ -5,12 +5,11 @@
   "main": "dist/cms.js",
   "scripts": {
     "start": "npm run dev",
-    "dev": "webpack-dev-server -d --config webpack.dev.js",
-    "dev:write": "webpack-dev-server -d --config webpack.dev-write.js",
+    "dev": "webpack-dev-server --env.development",
+    "dev:write": "webpack-dev-server --env.development --env.write",
     "test": "jest --coverage",
     "test:watch": "jest --watch",
-    "build": "cross-env NODE_ENV=production webpack --config webpack.prod.js --display-error-details",
-    "build:scripts": "cross-env NODE_ENV=production webpack --config webpack.cli.js",
+    "build": "cross-env NODE_ENV=production webpack-cli --display-error-details --env.production",
     "add-contributor": "all-contributors add",
     "generate-contributors": "all-contributors generate",
     "lint": "npm run lint:js & npm run lint:css",
@@ -77,7 +76,7 @@
     "babel-cli": "^6.18.0",
     "babel-core": "^6.23.1",
     "babel-jest": "^22.0.0",
-    "babel-loader": "^7.0.0",
+    "babel-loader": "^7.1.4",
     "babel-plugin-lodash": "^3.2.0",
     "babel-plugin-module-resolver": "^3.0.0",
     "babel-plugin-transform-builtin-extend": "^1.1.0",
@@ -89,42 +88,40 @@
     "babel-preset-env": "^1.6.0",
     "babel-preset-react": "^6.23.0",
     "babel-runtime": "^6.23.0",
-    "cross-env": "^5.0.2",
-    "css-loader": "^0.28.7",
+    "cross-env": "^5.1.4",
+    "css-loader": "^0.28.11",
     "cssnano": "^v4.0.0-rc.2",
     "deep-equal": "^1.0.1",
     "enzyme": "^3.1.0",
     "enzyme-adapter-react-16": "^1.0.2",
     "eslint": "^3.7.1",
     "eslint-config-netlify": "github:netlify/eslint-config-netlify",
-    "eslint-import-resolver-webpack": "^0.8.3",
-    "exports-loader": "^0.6.4",
-    "extract-text-webpack-plugin": "^3.0.0",
-    "file-loader": "^1.1.4",
+    "eslint-import-resolver-babel-module": "^4.0.0",
+    "exports-loader": "^0.7.0",
+    "file-loader": "^1.1.11",
     "identity-obj-proxy": "^3.0.0",
-    "imports-loader": "^0.7.1",
+    "imports-loader": "^0.8.0",
     "jest": "^22.0.0",
     "jest-cli": "^22.0.0",
     "lint-staged": "^3.3.1",
+    "mini-css-extract-plugin": "^0.4.0",
     "npm-check": "^5.2.3",
     "postcss-cssnext": "^3.0.2",
     "postcss-import": "^11.0.0",
-    "postcss-loader": "^2.0.7",
+    "postcss-loader": "^2.1.3",
     "raf": "^3.4.0",
     "react-test-renderer": "^16.0.0",
-    "style-loader": "^0.18.2",
+    "style-loader": "^0.20.3",
     "stylefmt": "^4.3.1",
     "stylelint": "^7.9.0",
     "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",
     "svg-inline-loader": "^0.8.0",
-    "uglifyjs-webpack-plugin": "^1.0.1",
-    "webpack": "^3.6.0",
-    "webpack-dev-server": "^2.9.1",
-    "webpack-merge": "^4.1.0",
-    "webpack-postcss-tools": "^1.1.1",
+    "webpack": "^4.4.1",
+    "webpack-cli": "^2.0.13",
+    "webpack-dev-server": "^3.1.3",
     "write-file-webpack-plugin": "^4.2.0"
   },
   "dependencies": {
@@ -154,6 +151,7 @@
     "react-dnd-html5-backend": "^2.5.4",
     "react-dom": "^16.0.0",
     "react-frame-component": "^2.0.0",
+    "react-hot-loader": "^4.0.0",
     "react-immutable-proptypes": "^2.1.0",
     "react-modal": "^3.1.5",
     "react-redux": "^4.4.0",

src/components/App/App.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import { hot } from 'react-hot-loader';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { connect } from 'react-redux';
 import { Route, Switch, Link, Redirect } from 'react-router-dom';
@@ -179,4 +180,6 @@ function mapDispatchToProps(dispatch) {
   };
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(App);
+export default hot(module)(
+  connect(mapStateToProps, mapDispatchToProps)(App)
+);