chore: upgrade to webpack 4 + don't minimize backend, closes #771

Author: Guillaume Chau

package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "dev": "cross-env PORT=8100 npm run dev:shell",
     "dev:shell": "cd shells/dev && webpack-dev-server --inline --hot --no-info",
-    "dev:chrome": "cd shells/chrome && webpack --watch --hide-modules",
+    "dev:chrome": "cd shells/chrome && cross-env NODE_ENV=production webpack --watch --hide-modules",
     "lint": "eslint src --ext=js,vue && eslint shells/chrome/src && eslint shells/dev/src && eslint shells/electron/src",
     "build": "cd shells/chrome && cross-env NODE_ENV=production webpack --progress --hide-modules",
     "run:firefox": "web-ext run -s shells/chrome -a dist -i src",
@@ -37,48 +37,49 @@
   "homepage": "https://github.com/vuejs/vue-devtools#readme",
   "dependencies": {
     "@vue/ui": "^0.5.6",
-    "autoprefixer": "^9.0.2",
     "circular-json-es6": "^2.0.1",
-    "d3": "^5.5.0",
+    "d3": "^5.7.0",
     "lodash.debounce": "^4.0.8",
     "lodash.groupby": "^4.6.0",
     "lru-cache": "^4.1.3",
-    "uglifyjs-webpack-plugin": "^1.1.4",
-    "vue": "^2.5.13",
+    "vue": "^2.5.17",
     "vue-router": "^3.0.1",
     "vue-virtual-scroller": "^0.12.0",
     "vuex": "^3.0.1"
   },
   "devDependencies": {
+    "autoprefixer": "^9.1.5",
     "buble": "^0.19.0",
     "buble-loader": "^0.5.1",
-    "cross-env": "^5.1.3",
-    "css-loader": "^0.28.7",
-    "cypress": "^3.0.2",
-    "eslint": "^5.2.0",
+    "cross-env": "^5.2.0",
+    "css-loader": "^1.0.0",
+    "cypress": "^3.1.0",
+    "eslint": "^5.6.0",
     "eslint-config-standard": "^12.0.0",
     "eslint-plugin-cypress": "^2.0.1",
-    "eslint-plugin-import": "^2.13.0",
+    "eslint-plugin-import": "^2.14.0",
     "eslint-plugin-node": "^7.0.1",
     "eslint-plugin-promise": "^4.0.0",
     "eslint-plugin-standard": "^4.0.0",
     "eslint-plugin-vue": "^5.0.0-beta.3",
-    "file-loader": "^1.1.6",
-    "friendly-errors-webpack-plugin": "^1.6.1",
+    "file-loader": "^2.0.0",
+    "friendly-errors-webpack-plugin": "^1.7.0",
     "inquirer": "^6.2.0",
-    "launch-editor-middleware": "^2.1.0",
-    "postcss-loader": "^2.1.6",
+    "launch-editor-middleware": "^2.2.1",
+    "postcss-loader": "^3.0.0",
     "raw-loader": "^0.5.1",
-    "semver": "^5.4.1",
-    "start-server-and-test": "^1.5.0",
-    "style-resources-loader": "^1.1.0",
+    "semver": "^5.5.1",
+    "start-server-and-test": "^1.7.1",
+    "style-resources-loader": "^1.2.1",
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.1",
-    "url-loader": "^0.6.2",
-    "vue-loader": "^15.0.0-beta.1",
-    "vue-template-compiler": "^2.5.13",
-    "webpack": "^3.10.0",
-    "webpack-dev-server": "^2.9.7",
+    "uglifyjs-webpack-plugin": "^1.2.7",
+    "url-loader": "^1.1.1",
+    "vue-loader": "^15.4.2",
+    "vue-template-compiler": "^2.5.17",
+    "webpack": "^4.19.0",
+    "webpack-cli": "^3.1.0",
+    "webpack-dev-server": "^3.1.8",
     "webpack-merge": "^4.1.2"
   },
   "engines": {

shells/createConfig.js

@@ -15,6 +15,7 @@ module.exports = (config, target = { chrome: 52, firefox: 48 }) => {
   }
 
   const baseConfig = {
+    mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
     resolve: {
       alias: {
         src: path.resolve(__dirname, '../src'),
@@ -84,6 +85,9 @@ module.exports = (config, target = { chrome: 52, firefox: 48 }) => {
     ],
     devServer: {
       port: process.env.PORT
+    },
+    stats: {
+      colors: true
     }
   }
 
@@ -92,9 +96,54 @@ module.exports = (config, target = { chrome: 52, firefox: 48 }) => {
     baseConfig.plugins.push(
       new webpack.DefinePlugin({
         'process.env.NODE_ENV': '"production"'
-      }),
-      new UglifyPlugin()
+      })
     )
+    baseConfig.optimization = {
+      minimizer: [
+        new UglifyPlugin({
+          exclude: /backend/,
+          uglifyOptions: {
+            compress: {
+              // turn off flags with small gains to speed up minification
+              arrows: false,
+              collapse_vars: false, // 0.3kb
+              comparisons: false,
+              computed_props: false,
+              hoist_funs: false,
+              hoist_props: false,
+              hoist_vars: false,
+              inline: false,
+              loops: false,
+              negate_iife: false,
+              properties: false,
+              reduce_funcs: false,
+              reduce_vars: false,
+              switches: false,
+              toplevel: false,
+              typeofs: false,
+
+              // a few flags with noticable gains/speed ratio
+              // numbers based on out of the box vendor bundle
+              booleans: true, // 0.7kb
+              if_return: true, // 0.4kb
+              sequences: true, // 0.7kb
+              unused: true, // 2.3kb
+
+              // required features to drop conditional branches
+              conditionals: true,
+              dead_code: true,
+              evaluate: true
+            },
+            mangle: {
+              safari10: true
+            }
+          },
+          sourceMap: false,
+          cache: true,
+          parallel: true
+        })
+      ]
+    }
   }
 
   return merge(baseConfig, config)

shells/electron/package.json

@@ -14,7 +14,7 @@
     "start": "node bin.js",
     "dev": "webpack --watch --hide-modules",
     "build": "webpack",
-    "prepare": "npm run build"
+    "prepublishOnly": "npm run build"
   },
   "author": "",
   "license": "MIT",
@@ -26,6 +26,7 @@
     "socket.io": "^2.0.4"
   },
   "devDependencies": {
-    "webpack": "^3.10.0"
+    "webpack": "^4.19.0",
+    "webpack-cli": "^3.1.0"
   }
 }