[Migration] Webpack 4 - detecting outstanding issues.

Author: DorianGrey

config/webpack/common.js

@@ -276,7 +276,7 @@ module.exports = function(isDev, extractTextPluginOptions, publicUrl) {
         formatter: "codeframe"
       }),
 
-      new StyleLintPlugin(styleLintConfig),
+      // new StyleLintPlugin(styleLintConfig), // TODO: Need to re-enable this for webpack 4.
 
       new ProgressBarPlugin({
         clear: true,

config/webpack/dev.js

@@ -4,7 +4,6 @@ const path = require("path");
 const chalk = require("chalk");
 const { NoEmitOnErrorsPlugin } = require("webpack");
 const HotModuleReplacementPlugin = require("webpack/lib/HotModuleReplacementPlugin");
-const NamedModulesPlugin = require("webpack/lib/NamedModulesPlugin");
 const merge = require("webpack-merge");
 const AutoDllPlugin = require("autodll-webpack-plugin");
 const HardSourceWebpackPlugin = require("hard-source-webpack-plugin");
@@ -25,6 +24,7 @@ module.exports = function() {
   return merge.smartStrategy({ plugins: "prepend" })(
     commonConfig(true, {}, publicUrl),
     {
+      mode: "development",
       entry: [
         require.resolve("webpack-dev-server/client") + "?/",
         require.resolve("webpack/hot/dev-server"),
@@ -41,8 +41,11 @@ module.exports = function() {
           path.resolve(info.absoluteResourcePath)
       },
 
+      optimization: {
+        noEmitOnErrors: true
+      },
+
       plugins: [
-        new NamedModulesPlugin(),
         new HotModuleReplacementPlugin(),
         new NoEmitOnErrorsPlugin(),
         new ErrorFormatterPlugin({
@@ -54,7 +57,7 @@ module.exports = function() {
             `
           ]
         }),
-        new AutoDllPlugin(dllConfig),
+        // new AutoDllPlugin(dllConfig), // TODO: Need to re-enable this for webpack 4.
         // See https://github.com/mzgoddard/hard-source-webpack-plugin
         new HardSourceWebpackPlugin()
       ]

config/webpack/plugins/ErrorFormatterPlugin.js

@@ -40,6 +40,14 @@ function msToPeriod(ms) {
   return result.join(" ");
 }
 
+function hookToCompiler(compiler, event, callback) {
+  if (compiler.hooks[event]) {
+    compiler.hooks[event].tap("ErrorFormatterPlugin", callback);
+  } else {
+    compiler.on(event, callback);
+  }
+}
+
 class ErrorFormatterPlugin {
   constructor(options) {
     this.options = options || {};
@@ -64,7 +72,7 @@ class ErrorFormatterPlugin {
   }
 
   apply(compiler) {
-    compiler.plugin("done", stats => {
+    const onDone = stats => {
       this.options.clear.onDone && this.cls();
       const hasErrors = stats.hasErrors();
       const hasWarnings = stats.hasWarnings();
@@ -88,12 +96,15 @@ class ErrorFormatterPlugin {
         this.out.errorLabel(`Compilation failed after ${time}. `).endl();
         this.displayMalfunctions(hasErrors, hasWarnings, stats);
       }
-    });
+    };
 
-    compiler.plugin("invalid", () => {
+    const onInvalid = () => {
       this.options.clear.onInvalid && this.cls();
       this.out.info("Compiling...").endl();
-    });
+    };
+
+    hookToCompiler(compiler, "done", onDone);
+    hookToCompiler(compiler, "invalid", onInvalid);
   }
 
   displayMalfunctions(hasErrors, hasWarnings, stats) {

config/webpack/prod.js

@@ -2,12 +2,8 @@
 
 const path = require("path");
 const merge = require("webpack-merge");
-const { NoEmitOnErrorsPlugin } = require("webpack");
 
-const CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
 const HashedModuleIdsPlugin = require("webpack/lib/HashedModuleIdsPlugin");
-const UglifyJsPlugin = require("webpack/lib/optimize/UglifyJsPlugin");
-const ModuleConcatenationPlugin = require("webpack/lib/optimize/ModuleConcatenationPlugin");
 
 const ExtractTextPlugin = require("extract-text-webpack-plugin");
 const InlineChunkManifestHtmlWebpackPlugin = require("inline-chunk-manifest-html-webpack-plugin");
@@ -44,6 +40,7 @@ module.exports = function() {
     commonConfig(false, extractTextPluginOptions, paths.publicUrl),
     {
       bail: true,
+      mode: "production",
       entry: paths.appIndex,
 
       // TODO: Handle https://vue-loader.vuejs.org/en/configurations/extract-css.html !
@@ -57,18 +54,23 @@ module.exports = function() {
           path.relative(paths.appSrc, info.absoluteResourcePath)
       },
 
+      optimization: {
+        splitChunks: {
+          cacheGroups: {
+            vendors: {
+              chunks: "all",
+              test: /[\\\/]node_modules[\\\/]/,
+              priority: -10,
+              name: "vendor"
+            }
+          }
+        },
+        runtimeChunk: { name: "runtime" }
+      },
+
       plugins: [
-        // Plugin to let the whole build fail on any error; i.e. do not tolerate these
-        new NoEmitOnErrorsPlugin(),
         // For more consistent module IDs
         new HashedModuleIdsPlugin(),
-        // Creates a dynamic vendor chunk by including all entries from the `node_modules` directory.
-        new CommonsChunkPlugin({
-          name: "vendor",
-          minChunks: ({ resource }) => /node_modules/.test(resource)
-        }),
-        // Externalizes the application manifest.
-        new CommonsChunkPlugin("manifest"),
         // Generate a manifest file which contains a mapping of all asset filenames
         // to their corresponding output file so that tools can pick it up without
         // having to parse `index.html`.
@@ -118,28 +120,12 @@ module.exports = function() {
           logLevel: "silent"
         }),
 
-        new ModuleConcatenationPlugin(),
-
         new WorkboxPlugin({
           globDirectory: paths.appBuild,
           globPatterns: ["**/*.{html,js,css,jpg,eot,svg,woff2,woff,ttf,json}"],
           globIgnores: ["**/*.map"],
           swDest: path.join(paths.appBuild, "service-worker.js"),
           swSrc: path.join(paths.appSrc, "service-worker.js")
-        }),
-
-        new UglifyJsPlugin({
-          compress: {
-            warnings: false,
-            // This feature has been reported as buggy a few times, such as:
-            // https://github.com/mishoo/UglifyJS2/issues/1964
-            // We'll wait with enabling it by default until it is more solid.
-            reduce_vars: false
-          },
-          output: {
-            comments: false
-          },
-          sourceMap: true
         })
       ]
     }

package.json

@@ -28,7 +28,7 @@
     "lodash-es": "^4.17.5",
     "sanitize.css": "^5.0.0",
     "tslib": "^1.9.0",
-    "vee-validate": "2.0.4",
+    "vee-validate": "2.0.5",
     "vue": "^2.5.13",
     "vue-carousel-3d": "^0.1.20",
     "vue-i18n": "^7.4.2",
@@ -38,29 +38,29 @@
     "webfontloader": "^1.6.28"
   },
   "devDependencies": {
-    "@types/jest": "^22.1.3",
+    "@types/jest": "^22.1.4",
     "@types/lodash-es": "4.17.0",
     "@types/webfontloader": "^1.6.29",
     "@types/webpack-env": "^1.13.5",
     "@vue/test-utils": "^1.0.0-beta.12",
     "autodll-webpack-plugin": "^0.3.9",
-    "autoprefixer": "^8.0.0",
+    "autoprefixer": "^8.1.0",
     "babel-core": "^6.26.0",
     "babel-loader": "^7.1.3",
     "babel-preset-env": "^1.6.1",
     "case-sensitive-paths-webpack-plugin": "^2.1.1",
-    "chalk": "^2.3.1",
+    "chalk": "^2.3.2",
     "compression": "^1.7.2",
     "css-loader": "^0.28.10",
     "cssnano": "^3.10.0",
     "express": "^4.16.2",
-    "extract-text-webpack-plugin": "^3.0.2",
-    "file-loader": "^1.1.10",
+    "extract-text-webpack-plugin": "^4.0.0-beta.0",
+    "file-loader": "^1.1.11",
     "fork-ts-checker-webpack-plugin": "^0.4.0",
     "fs-extra": "^5.0.0",
     "globby": "^8.0.1",
-    "hard-source-webpack-plugin": "^0.6.0",
-    "html-webpack-plugin": "^2.30.1",
+    "hard-source-webpack-plugin": "^0.6.1",
+    "html-webpack-plugin": "^3.0.4",
     "http-proxy": "^1.16.2",
     "husky": "^0.14.3",
     "image-webpack-loader": "^3.4.2",
@@ -70,37 +70,37 @@
     "lint-staged": "^7.0.0",
     "lodash": "^4.17.5",
     "node-sass": "^4.7.2",
-    "optimize-css-assets-webpack-plugin": "^3.2.0",
+    "optimize-css-assets-webpack-plugin": "^4.0.0",
     "postcss-flexbugs-fixes": "^3.3.0",
     "postcss-loader": "^2.1.1",
-    "prettier": "^1.11.0",
+    "prettier": "^1.11.1",
     "progress-bar-webpack-plugin": "^1.11.0",
     "purify-css": "^1.2.5",
     "purifycss-webpack": "^0.7.0",
-    "resolve-url-loader": "^2.2.1",
-    "sass-loader": "^6.0.6",
+    "resolve-url-loader": "^2.3.0",
+    "sass-loader": "^6.0.7",
     "shelljs": "^0.8.1",
     "strip-ansi": "^4.0.0",
     "style-loader": "^0.20.2",
     "stylelint": "^9.1.1",
-    "stylelint-config-standard": "^18.1.0",
+    "stylelint-config-standard": "^18.2.0",
     "stylelint-formatter-pretty": "^1.0.3",
     "stylelint-processor-html": "^1.0.0",
     "stylelint-scss": "^2.4.0",
     "stylelint-webpack-plugin": "^0.10.3",
-    "ts-jest": "^22.4.0",
-    "ts-loader": "^3.5.0",
+    "ts-jest": "^22.4.1",
+    "ts-loader": "^4.0.1",
     "tslint": "^5.9.1",
     "tslint-config-prettier": "^1.9.0",
     "typescript": "2.7.2",
-    "url-loader": "^0.6.2",
+    "url-loader": "^1.0.1",
     "vue-loader": "^14.1.1",
     "vue-template-compiler": "^2.5.13",
-    "vue-template-loader": "^0.4.0",
-    "webpack": "^3.11.0",
-    "webpack-bundle-analyzer": "^2.11.0",
-    "webpack-dev-server": "^2.11.1",
+    "vue-template-loader": "^0.4.1",
+    "webpack": "^4.1.0",
+    "webpack-bundle-analyzer": "^2.11.1",
+    "webpack-dev-server": "^3.1.0",
     "webpack-merge": "^4.1.2",
-    "workbox-webpack-plugin": "^2.1.2"
+    "workbox-webpack-plugin": "^2.1.3"
   }
 }

src/service-worker.js

@@ -1,4 +1,4 @@
-importScripts("workbox-sw.prod.v2.1.2.js");
+importScripts("workbox-sw.prod.v2.1.3.js");
 
 const workboxSW = new WorkboxSW();
 workboxSW.precache([]);