Initial attempt at webpack 4 upgrade, still not working.

package.json

@@ -22,7 +22,6 @@
     "ethereumjs-util": "5.1.4",
     "ethereumjs-wallet": "0.6.0",
     "font-awesome": "4.7.0",
-    "hard-source-webpack-plugin": "0.5.16",
     "hdkey": "0.8.0",
     "idna-uts46": "1.1.0",
     "jsonschema": "1.2.2",
@@ -92,8 +91,9 @@
     "file-loader": "1.1.10",
     "friendly-errors-webpack-plugin": "1.6.1",
     "glob": "7.1.2",
+    "hard-source-webpack-plugin": "0.6.0",
     "hoist-non-react-statics": "2.5.0",
-    "html-webpack-plugin": "2.30.1",
+    "html-webpack-plugin": "github:webpack-contrib/html-webpack-plugin#1dee37e",
     "husky": "0.14.3",
     "image-webpack-loader": "4.1.0",
     "jest": "22.1.4",
@@ -126,26 +126,27 @@
     "typescript": "2.6.2",
     "url-loader": "0.6.2",
     "url-search-params-polyfill": "2.0.3",
-    "webpack": "3.11.0",
+    "webpack": "4.0.1",
+    "webpack-cli": "2.0.9",
     "webpack-dev-middleware": "2.0.6",
     "webpack-hot-middleware": "2.21.0",
     "webpack-sources": "1.0.1",
     "webpack-subresource-integrity": "1.0.4",
-    "worker-loader": "1.1.1",
+    "what-input": "5.0.5",
-    "what-input": "5.0.5"
+    "worker-loader": "1.1.1"
   },
   "scripts": {
     "freezer": "webpack --config=./webpack_config/webpack.freezer.js && node ./dist/freezer.js",
     "freezer:validate": "npm run freezer -- --validate",
     "db": "nodemon ./db",
-    "build": "webpack --config webpack_config/webpack.prod.js",
+    "build": "webpack --mode=production --config webpack_config/webpack.prod.js",
     "prebuild": "check-node-version --package",
-    "build:downloadable": "webpack --config webpack_config/webpack.html.js",
+    "build:downloadable": "webpack --mode=production --config webpack_config/webpack.html.js",
     "prebuild:downloadable": "check-node-version --package",
-    "build:electron": "webpack --config webpack_config/webpack.electron-prod.js && node webpack_config/buildElectron.js",
+    "build:electron": "webpack --mode=production --config webpack_config/webpack.electron-prod.js && node webpack_config/buildElectron.js",
-    "build:electron:osx": "webpack --config webpack_config/webpack.electron-prod.js && ELECTRON_OS=osx node webpack_config/buildElectron.js",
+    "build:electron:osx": "webpack --mode=production --config webpack_config/webpack.electron-prod.js && ELECTRON_OS=osx node webpack_config/buildElectron.js",
-    "build:electron:windows": "webpack --config webpack_config/webpack.electron-prod.js && ELECTRON_OS=windows node webpack_config/buildElectron.js",
+    "build:electron:windows": "webpack --mode=production --config webpack_config/webpack.electron-prod.js && ELECTRON_OS=windows node webpack_config/buildElectron.js",
-    "build:electron:linux": "webpack --config webpack_config/webpack.electron-prod.js && ELECTRON_OS=linux node webpack_config/buildElectron.js",
+    "build:electron:linux": "webpack --mode=production --config webpack_config/webpack.electron-prod.js && ELECTRON_OS=linux node webpack_config/buildElectron.js",
     "prebuild:electron": "check-node-version --package",
     "test:coverage": "jest --config=jest_config/jest.config.json --coverage",
     "test": "jest --config=jest_config/jest.config.json",

webpack_config/devServer.js

@@ -45,7 +45,7 @@ const devMiddleWare = require('webpack-dev-middleware')(compiler, {
 app.use(devMiddleWare);
 app.use(
   require('webpack-hot-middleware')(compiler, {
-    log: console.info
+    log: false
   })
 );
 

webpack_config/makeConfig.js

@@ -6,10 +6,9 @@ const threadLoader = require('thread-loader');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');
-const AutoDllPlugin = require('autodll-webpack-plugin');
-const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
 const FaviconsWebpackPlugin = require('favicons-webpack-plugin');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
 const ProgressPlugin = require('webpack/lib/ProgressPlugin');
 const BabelMinifyPlugin = require('babel-minify-webpack-plugin');
 const SriPlugin = require('webpack-subresource-integrity');
@@ -214,10 +213,6 @@ module.exports = function(opts = {}) {
           comments: false
         }
       ),
-      new webpack.optimize.CommonsChunkPlugin({
-        name: 'vendor',
-        filename: 'vendor.[chunkhash:8].js'
-      }),
       new ExtractTextPlugin('[name].[chunkhash:8].css'),
       new FaviconsWebpackPlugin({
         logo: path.resolve(config.path.assets, 'images/favicon.png'),
@@ -234,24 +229,14 @@ module.exports = function(opts = {}) {
     );
   } else {
     plugins.push(
-      new AutoDllPlugin({
-        inject: true, // will inject the DLL bundles to index.html
-        filename: '[name]_[hash].js',
-        debug: true,
-        context: path.join(config.path.root),
-        entry: {
-          vendor: [...config.vendorModules, 'babel-polyfill', 'bootstrap-sass', 'font-awesome']
-        }
-      }),
       new HardSourceWebpackPlugin({
         environmentHash: {
           root: process.cwd(),
-          directories: ['webpack_config'],
+          directories: ['common/webpack_config'],
           files: ['package.json']
         }
       }),
       new webpack.HotModuleReplacementPlugin(),
-      new webpack.NoEmitOnErrorsPlugin(),
       new FriendlyErrorsPlugin()
     );
   }
@@ -276,6 +261,16 @@ module.exports = function(opts = {}) {
     );
   }
 
+  // ====================
+  // === Optimization ===
+  // ====================
+  const optimization = {};
+  if (options.isProduction) {
+    optimization.splitChunks = {
+      chunks: 'all'
+    };
+  }
+
   // ====================
   // ====== DevTool =====
   // ====================
@@ -310,6 +305,8 @@ module.exports = function(opts = {}) {
     performance: {
       hints: options.isProduction ? 'warning' : false
     },
+    optimization,
+    mode: options.isProduction ? 'production' : 'development',
     stats: {
       // Reduce build output
       children: false,

webpack_config/plugins/serverLog.js

@@ -1,20 +1,19 @@
 'use strict';
 const chalk = require('chalk');
 
-// this plugin if for loggin url after each time the compilation is done.
+const LogPlugin = function(port) {
-module.exports = class LogPlugin {
+  this.port = port;
-  constructor(port) {
+  this.protocol = process.env.HTTPS ? 'https' : 'http';
-    this.port = port;
-  }
-
-  apply(compiler) {
-    const protocol = process.env.HTTPS ? 'https' : 'http';
-    compiler.plugin('done', () => {
-      console.log(
-        `> App is running at ${chalk.yellow(
-          `${protocol}://localhost:${this.port}`
-        )}\n`
-      );
-    });
-  }
 };
+
+LogPlugin.prototype.apply = function(compiler) {
+  compiler.plugin('done', (compiler, done) => {
+    console.log(
+      `> App is running at ${chalk.yellow(
+        `${this.protocol}://localhost:${this.port}`
+      )}\n`
+    );
+  });
+};
+
+module.exports = LogPlugin;