Update to Webpack 4

package.json

@@ -32,14 +32,14 @@
     "babel-core": "^6.23.1",
     "babel-eslint": "^8.2.1",
     "babel-jest": "^22.2.2",
-    "babel-loader": "^7.1.0",
+    "babel-loader": "^7.1.4",
     "babel-plugin-react-intl": "2.4.0",
     "babel-plugin-transform-object-rest-spread": "^6.22.0",
     "babel-preset-es2015": "^6.22.0",
     "babel-preset-react": "^6.22.0",
     "canvas-prebuilt": "^1.6.5-prerelease.1",
     "classnames": "2.2.5",
-    "css-loader": "0.28.10",
+    "css-loader": "^0.28.11",
     "enzyme": "^3.1.0",
     "enzyme-adapter-react-16": "^1.0.1",
     "eslint": "^4.4.1",
@@ -48,7 +48,7 @@
     "eslint-plugin-import": "^2.9.0",
     "eslint-plugin-react": "^7.2.1",
     "gh-pages": "github:rschamp/gh-pages#publish-branch-to-subfolder",
-    "html-webpack-plugin": "3.0.6",
+    "html-webpack-plugin": "^3.2.0",
     "jest": "^22.2.2",
     "keymirror": "0.1.1",
     "lodash.bindall": "4.4.0",
@@ -58,7 +58,7 @@
     "paper": "0.11.5",
     "parse-color": "1.0.0",
     "postcss-import": "^11.0.0",
-    "postcss-loader": "^2.0.5",
+    "postcss-loader": "^2.1.4",
     "postcss-simple-vars": "^4.0.0",
     "prop-types": "^15.5.10",
     "raf": "^3.4.0",
@@ -78,12 +78,14 @@
     "regenerator-runtime": "^0.11.1",
     "rimraf": "^2.6.1",
     "scratch-l10n": "^2.0.0",
-    "style-loader": "^0.20.1",
+    "style-loader": "^0.21.0",
-    "svg-url-loader": "^2.2.0",
+    "svg-url-loader": "^2.3.2",
     "tap": "^11.1.0",
-    "url-loader": "^0.6.2",
+    "uglifyjs-webpack-plugin": "^1.2.5",
-    "webpack": "^3.5.4",
+    "url-loader": "^1.0.1",
-    "webpack-dev-server": "^2.7.0"
+    "webpack": "^4.8.0",
+    "webpack-cli": "^2.0.15",
+    "webpack-dev-server": "^3.1.4"
   },
   "jest": {
     "setupFiles": [

webpack.config.js

@@ -1,9 +1,9 @@
 const defaultsDeep = require('lodash.defaultsdeep');
 const path = require('path');
-const webpack = require('webpack');
 
 // Plugins
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 
 // PostCss
 const autoprefixer = require('autoprefixer');
@@ -11,6 +11,7 @@ const postcssVars = require('postcss-simple-vars');
 const postcssImport = require('postcss-import');
 
 const base = {
+    mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
     devtool: 'cheap-module-source-map',
     module: {
         rules: [{
@@ -59,13 +60,14 @@ const base = {
             loader: 'svg-url-loader?noquotes'
         }]
     },
-    plugins: []
+    optimization: {
-        .concat(process.env.NODE_ENV === 'production' ? [
+        minimizer: [
-            new webpack.optimize.UglifyJsPlugin({
+            new UglifyJsPlugin({
-                include: /\.min\.js$/,
+                include: /\.min\.js$/
-                minimize: true
             })
-        ] : [])
+        ]
+    },
+    plugins: []
 };
 
 module.exports = [