[Migration] Webpack 4 - detecting outstanding issues.

Includes a huge amount of additional updates as well.

Author: DorianGrey

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,20 +2,15 @@
 
 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");
 const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
   .BundleAnalyzerPlugin;
 const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
 const PurifyCSSPlugin = require("purifycss-webpack");
-const WorkboxPlugin = require("workbox-webpack-plugin");
+const { InjectManifest } = require("workbox-webpack-plugin");
 const glob = require("globby");
 
 const paths = require("../paths");
@@ -28,7 +23,7 @@ if (process.env.NODE_ENV !== "production") {
 }
 
 // Note: defined here because it will be used more than once.
-const cssFilename = "static/css/[name].[contenthash:8].css";
+const cssFilename = "static/css/[name].[chunkhash:8].css"; // TODO: Turn into [contenthash] once available...
 
 // ExtractTextPlugin expects the build output to be flat.
 // (See https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/27)
@@ -44,43 +39,43 @@ 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 !
 
       output: {
         path: paths.appBuild,
         filename: "static/js/[name].[chunkhash:8].js",
-        chunkFilename: "static/js/[name].[chunkhash:8].chunk.js",
+        chunkFilename: "static/js/[name].[chunkhash:8].js",
         publicPath: paths.publicPath,
         devtoolModuleFilenameTemplate: info =>
           path.relative(paths.appSrc, info.absoluteResourcePath)
       },
 
+      optimization: {
+        splitChunks: {
+          cacheGroups: {
+            vendors: {
+              chunks: "all",
+              test: /[\\\/]node_modules[\\\/]/,
+              priority: -10,
+              name: "vendor"
+            }
+          }
+        },
+        runtimeChunk: { name: "runtime" }
+      },
+
+      performance: false,
+
       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`.
-        // Extracts the chunk manifest and inlines it into the template, while retaining
-        // the original file.
-        new InlineChunkManifestHtmlWebpackPlugin({
-          filename: "asset-manifest.json",
-          dropAsset: true
-        }),
         // Extract CSS, purify, dedupe and optimize it.
         new ExtractTextPlugin({
-          filename: cssFilename
+          filename: cssFilename,
+          allChunks: true
         }),
         new PurifyCSSPlugin({
           paths: glob.sync([
@@ -93,7 +88,8 @@ module.exports = function() {
             whitelist: [
               "*:not*", // See issue: https://github.com/purifycss/purifycss/issues/161
               ".notices", // Hierarchy not detected correctly.
-              ".snackbar" // Same
+              ".snackbar", // Same
+              ".carousel-3d-container"
             ]
           }
         }),
@@ -118,28 +114,13 @@ module.exports = function() {
           logLevel: "silent"
         }),
 
-        new ModuleConcatenationPlugin(),
-
-        new WorkboxPlugin({
+        new InjectManifest({
+          importWorkboxFrom: "local", // TODO: See if we can use "local" here, and disable our manual config.
           globDirectory: paths.appBuild,
           globPatterns: ["**/*.{html,js,css,jpg,eot,svg,woff2,woff,ttf,json}"],
           globIgnores: ["**/*.map"],
-          swDest: path.join(paths.appBuild, "service-worker.js"),
+          swDest: "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

@@ -24,83 +24,82 @@
     ]
   },
   "dependencies": {
-    "av-ts": "^0.9.2",
-    "lodash-es": "^4.17.5",
+    "av-ts": "^0.9.3",
+    "lodash-es": "^4.17.8",
     "sanitize.css": "^5.0.0",
     "tslib": "^1.9.0",
-    "vee-validate": "2.0.4",
-    "vue": "^2.5.13",
+    "vee-validate": "2.0.6",
+    "vue": "^2.5.16",
     "vue-carousel-3d": "^0.1.20",
-    "vue-i18n": "^7.4.2",
+    "vue-i18n": "^7.6.0",
     "vue-router": "^3.0.1",
-    "vuetify": "^1.0.4",
+    "vuetify": "^1.0.16",
     "vuex": "^3.0.1",
     "webfontloader": "^1.6.28"
   },
   "devDependencies": {
-    "@types/jest": "^22.1.3",
+    "@types/jest": "^22.2.3",
     "@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",
+    "@types/webpack-env": "^1.13.6",
+    "@vue/test-utils": "^1.0.0-beta.14",
     "autodll-webpack-plugin": "^0.3.9",
-    "autoprefixer": "^8.0.0",
+    "autoprefixer": "^8.3.0",
     "babel-core": "^6.26.0",
-    "babel-loader": "^7.1.3",
+    "babel-loader": "^7.1.4",
     "babel-preset-env": "^1.6.1",
-    "case-sensitive-paths-webpack-plugin": "^2.1.1",
-    "chalk": "^2.3.1",
+    "case-sensitive-paths-webpack-plugin": "^2.1.2",
+    "chalk": "^2.4.0",
     "compression": "^1.7.2",
-    "css-loader": "^0.28.10",
+    "css-loader": "^0.28.11",
     "cssnano": "^3.10.0",
-    "express": "^4.16.2",
-    "extract-text-webpack-plugin": "^3.0.2",
-    "file-loader": "^1.1.10",
-    "fork-ts-checker-webpack-plugin": "^0.4.0",
+    "express": "^4.16.3",
+    "extract-text-webpack-plugin": "^4.0.0-beta.0",
+    "file-loader": "^1.1.11",
+    "fork-ts-checker-webpack-plugin": "^0.4.1",
     "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.4",
+    "html-webpack-plugin": "^3.2.0",
     "http-proxy": "^1.16.2",
     "husky": "^0.14.3",
     "image-webpack-loader": "^3.4.2",
     "imports-loader": "^0.8.0",
-    "inline-chunk-manifest-html-webpack-plugin": "^2.0.0",
-    "jest": "^22.4.2",
-    "lint-staged": "^7.0.0",
+    "jest": "^22.4.3",
+    "lint-staged": "^7.0.4",
     "lodash": "^4.17.5",
-    "node-sass": "^4.7.2",
-    "optimize-css-assets-webpack-plugin": "^3.2.0",
+    "node-sass": "^4.8.3",
+    "optimize-css-assets-webpack-plugin": "^4.0.0",
     "postcss-flexbugs-fixes": "^3.3.0",
-    "postcss-loader": "^2.1.1",
-    "prettier": "^1.11.0",
+    "postcss-loader": "^2.1.4",
+    "prettier": "^1.12.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": "^7.0.1",
     "shelljs": "^0.8.1",
     "strip-ansi": "^4.0.0",
-    "style-loader": "^0.20.2",
-    "stylelint": "^9.1.1",
-    "stylelint-config-standard": "^18.1.0",
+    "style-loader": "^0.21.0",
+    "stylelint": "^9.2.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",
+    "stylelint-scss": "^3.0.1",
+    "stylelint-webpack-plugin": "^0.10.4",
+    "ts-jest": "^22.4.4",
+    "ts-loader": "^4.2.0",
     "tslint": "^5.9.1",
-    "tslint-config-prettier": "^1.9.0",
-    "typescript": "2.7.2",
-    "url-loader": "^0.6.2",
-    "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",
+    "tslint-config-prettier": "^1.10.0",
+    "typescript": "2.8.1",
+    "url-loader": "^1.0.1",
+    "vue-loader": "^14.2.2",
+    "vue-template-compiler": "^2.5.16",
+    "vue-template-loader": "^0.4.1",
+    "webpack": "^4.6.0",
+    "webpack-bundle-analyzer": "^2.11.1",
+    "webpack-dev-server": "^3.1.3",
     "webpack-merge": "^4.1.2",
-    "workbox-webpack-plugin": "^2.1.2"
+    "workbox-webpack-plugin": "^3.1.0"
   }
 }

scripts/build.js

@@ -69,38 +69,13 @@ renderLoadingAnimation()
       dereference: true,
       filter: file => file !== paths.appHtml
     });
-    const pa = require.resolve("workbox-sw"),
-      swTargetPath = path.join(paths.appBuild, path.basename(pa)),
-      paMap = pa + ".map",
-      swMapPath = path.join(paths.appBuild, path.basename(pa) + ".map");
-
-    fs.copySync(pa, swTargetPath, {
-      dereference: true
-    });
-    fs.copySync(paMap, swMapPath, {
-      dereference: true
-    });
-
-    // Update service-worker script to properly update its referenced Workbox.js version.
-    shelljs.sed(
-      "-i",
-      /workbox-sw\.prod\.v\d.\d.\d\.js/i,
-      path.basename(pa),
-      path.resolve(paths.appSrc, "service-worker.js")
-    );
 
     // Determine copied paths, and add the generated service worker stuff as well
     // used for properly generating an output.
     const staticAssets = glob
       .sync([paths.appPublic + "/**/*", `!${paths.appPublic}/index.html`])
       .map(p => path.relative(paths.appPublic, p));
 
-    staticAssets.push(
-      path.relative(paths.appBuild, swTargetPath),
-      path.relative(paths.appBuild, swMapPath),
-      "service-worker.js"
-    );
-
     out.info("Processing build...").endl();
 
     return new Promise((resolve, reject) => {