HARP-12728: Add support for webpack5 (#1917)

* HARP-12623: Add support for webpack5 This change updates the webpack configurations to 5.2.0. Signed-off-by: Roberto Raggi <[email protected]> Signed-off-by: Jonathan Stichbury <[email protected]> * HARP-12623 More fixes Signed-off-by: Jonathan Stichbury <[email protected]> * HARP-12623: Upgrade webpack-cli to 4.2.0. webpack-cli 4.1.0 has some issue with "webpack serve". * HARP-12623: Define Node.js' process variables using webpack plugins. Webpack 5 does not include a polyfill for Node.js process. process.env.NODE_ENV and any other environment variables must be define using the EnvironmentPlugin. process.platform is defined using the DefinePlugin. * HARP-12623: Fix MapViewTest and ThemeLoaderTest. They were failing in windows due to calls to process.cwd() done by path module's path.relative() function. * HARP-12623: Upgrade to webpack 5.9.0. * HARP-12623: Enable webpack 5 persistent cache. - Workaround webpack 5 bug by prepending "./" to the webpack config file path, see webpack/webpack#11643 - Add webpack cache to travis cached directories. * HARP-12623: Speed up tests build. Move ts typechecking to separate process using ForkTsCheckerWebpackPlugin. * HARP-12623: Update HtmlWebpackPlugin. Version 4.3.0 was always adding "auto" path prefix to scripts in generated html files. Co-authored-by: Jonathan Stichbury <[email protected]> Co-authored-by: Andres Mandado <[email protected]>
heremaps · Dec 10, 2020 · df73a5e · df73a5e
1 parent 04e0620
commit df73a5e
Show file tree

Hide file tree

Showing 15 changed files with 658 additions and 1,203 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -4,6 +4,8 @@ node_js:
   - "12"
 cache:
   yarn: true
+  directories:
+    - "node_modules/.cache"
 
 addons:
   chrome: stable

diff --git a/@here/harp-examples/package.json b/@here/harp-examples/package.json
@@ -16,9 +16,9 @@
         "test": "exit 0",
         "prebuild": "node scripts/postinstall.js",
         "build": "webpack",
-        "start": "webpack-dev-server",
+        "start": "webpack serve",
         "publish-html": "node scripts/publish-html.js",
-        "prepare": "node scripts/postinstall.js && cross-env PREPARE_ONLY=true webpack -p"
+        "prepare": "node scripts/postinstall.js && cross-env PREPARE_ONLY=true NODE_ENV=production webpack"
     },
     "author": {
         "name": "HERE Europe B.V.",
@@ -43,23 +43,23 @@
         "@here/harp-webtile-datasource": "^0.21.1",
         "@types/dat.gui": "^0.7.1",
         "@types/long": "^4.0.1",
-        "copy-webpack-plugin": "^6.0.3",
+        "copy-webpack-plugin": "^6.3.2",
         "cross-env": "^7.0.2",
         "css-loader": "^3.5.3",
         "dat.gui": "^0.7.7",
         "highlight.js": "^10.4.1",
-        "html-webpack-plugin": "^4.3.0",
+        "html-webpack-plugin": "^5.0.0-alpha.14",
         "ncp": "^2.0.0",
         "stats.js": "^0.17.0",
         "style-loader": "^1.2.1",
         "suncalc": "^1.8.0",
         "three": "^0.122.0",
-        "ts-loader": "^7.0.5",
+        "ts-loader": "^8.0.7",
         "typescript": "^3.9.3",
-        "webpack": "^4.43.0",
-        "webpack-cli": "^3.3.11",
+        "webpack-cli": "^4.2.0",
         "webpack-dev-server": "^3.11.0",
-        "webpack-merge": "^4.1.1"
+        "webpack-merge": "^4.1.1",
+        "webpack": "^5.9.0"
     },
     "repository": {
         "type": "git",

diff --git a/@here/harp-examples/webpack.config.js b/@here/harp-examples/webpack.config.js
@@ -10,7 +10,6 @@ const webpack = require("webpack");
 const merge = require("webpack-merge");
 const path = require("path");
 const glob = require("glob");
-const HardSourceWebpackPlugin = require("hard-source-webpack-plugin");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 const CopyWebpackPlugin = require("copy-webpack-plugin");
 
@@ -50,19 +49,21 @@ const commonConfig = {
     devtool: prepareOnly ? undefined : "source-map",
     externals: [
         {
-            three: "THREE",
-            fs: "undefined"
+            three: "THREE"
         },
-        function(context, request, callback) {
+        ({ context, request }, cb) => {
             return /three\.module\.js$/.test(request)
-                ? callback(null, "THREE")
-                : callback(undefined, undefined);
+                ? cb(null, "THREE")
+                : cb(undefined, undefined);
         }
     ],
     resolve: {
         extensions: [".webpack.js", ".web.ts", ".ts", ".tsx", ".web.js", ".js"],
         alias: {
             "react-native": "react-native-web"
+        },
+        fallback: {
+            fs: false
         }
     },
     module: {
@@ -105,13 +106,15 @@ const commonConfig = {
         new webpack.DefinePlugin({
             THEMES: JSON.stringify(themeList)
         })
-    ]
+    ],
+    cache: process.env.HARP_NO_HARD_SOURCE_CACHE ? false :{
+        type: "filesystem",
+        buildDependencies: {
+            config: [ __filename ]
+        }
+    }
 };
 
-if (!process.env.HARP_NO_HARD_SOURCE_CACHE) {
-    commonConfig.plugins.push(new HardSourceWebpackPlugin());
-}
-
 const decoderConfig = merge(commonConfig, {
     target: "webworker",
     entry: {

diff --git a/@here/harp-mapview/test/MapViewTest.ts b/@here/harp-mapview/test/MapViewTest.ts
@@ -23,12 +23,9 @@ import {
 } from "@here/harp-test-utils";
 import * as TestUtils from "@here/harp-test-utils/lib/WebGLStub";
 import { FontCatalog } from "@here/harp-text-canvas";
-import { getAppBaseUrl } from "@here/harp-utils";
 import { assert, expect } from "chai";
-import * as path from "path";
 import * as sinon from "sinon";
 import * as THREE from "three";
-import * as nodeUrl from "url";
 
 import { BackgroundDataSource } from "../lib/BackgroundDataSource";
 import { DataSource } from "../lib/DataSource";
@@ -49,25 +46,10 @@ import { FakeOmvDataSource } from "./FakeOmvDataSource";
 
 //    Mocha discourages using arrow functions, see https://mochajs.org/#arrow-functions
 
-const URL = typeof window !== "undefined" ? window.URL : nodeUrl.URL;
-
 declare const global: any;
 
 const projections = [mercatorProjection, sphereProjection];
 
-function makeUrlRelative(baseUrl: string, url: string) {
-    const baseUrlParsed = new URL(baseUrl);
-    const urlParsed = new URL(url, baseUrl);
-
-    if (urlParsed.origin !== baseUrlParsed.origin) {
-        throw new Error("getRelativeUrl: origin mismatch");
-    }
-    if (urlParsed.protocol !== baseUrlParsed.protocol) {
-        throw new Error("getRelativeUrl: protocol mismatch");
-    }
-    return path.relative(baseUrlParsed.pathname, urlParsed.pathname);
-}
-
 describe("MapView", function() {
     const inNodeContext = typeof window === "undefined";
     let sandbox: sinon.SinonSandbox;
@@ -1652,7 +1634,6 @@ describe("MapView", function() {
     });
 
     describe("theme", function() {
-        const appBaseUrl = getAppBaseUrl();
         const sampleThemeUrl = getTestResourceUrl(
             "@here/harp-mapview",
             "test/resources/baseTheme.json"
@@ -1679,11 +1660,9 @@ describe("MapView", function() {
         });
 
         it("loads theme from url", async function() {
-            const relativeToAppUrl = makeUrlRelative(appBaseUrl, sampleThemeUrl);
-
             mapView = new MapView({
                 ...mapViewOptions,
-                theme: relativeToAppUrl
+                theme: sampleThemeUrl
             });
             const theme = await mapView.getTheme();
 
@@ -1709,11 +1688,9 @@ describe("MapView", function() {
         });
 
         it("allows to reset theme", async function() {
-            const relativeToAppUrl = makeUrlRelative(appBaseUrl, sampleThemeUrl);
-
             mapView = new MapView({
                 ...mapViewOptions,
-                theme: relativeToAppUrl
+                theme: sampleThemeUrl
             });
             await waitForEvent(mapView, MapViewEventNames.ThemeLoaded);
 

diff --git a/@here/harp-mapview/test/ThemeLoaderTest.ts b/@here/harp-mapview/test/ThemeLoaderTest.ts
@@ -6,11 +6,6 @@
 
 //    Mocha discourages using arrow functions, see https://mochajs.org/#arrow-functions
 
-import * as path from "path";
-import * as nodeUrl from "url";
-
-const URL = typeof window !== "undefined" ? window.URL : nodeUrl.URL;
-
 import { FlatTheme, SolidLineStyle, StyleSet, Theme } from "@here/harp-datasource-protocol";
 import { getTestResourceUrl } from "@here/harp-test-utils";
 import {
@@ -24,19 +19,6 @@ import { assert } from "chai";
 
 import { ThemeLoader } from "../lib/ThemeLoader";
 
-function makeUrlRelative(baseUrl: string, url: string) {
-    const baseUrlParsed = new URL(baseUrl);
-    const urlParsed = new URL(url, baseUrl);
-
-    if (urlParsed.origin !== baseUrlParsed.origin) {
-        throw new Error("getRelativeUrl: origin mismatch");
-    }
-    if (urlParsed.protocol !== baseUrlParsed.protocol) {
-        throw new Error("getRelativeUrl: protocol mismatch");
-    }
-    return path.relative(baseUrlParsed.pathname, urlParsed.pathname);
-}
-
 describe("ThemeLoader", function() {
     describe("#isThemeLoaded", function() {
         it("checks for external dependencies", function() {
@@ -67,19 +49,13 @@ describe("ThemeLoader", function() {
         });
 
         it("resolves absolute theme url of theme loaded from relative url", async function() {
-            // `sampleThemeUrl` may be absolute, but on same host (or fs), so relativize it
-            const relativeToAppUrl = makeUrlRelative(appBaseUrl, sampleThemeUrl);
-
-            const result = await ThemeLoader.load(relativeToAppUrl);
-            assert.equal(result.url, resolveReferenceUri(appBaseUrl, relativeToAppUrl));
+            const result = await ThemeLoader.load(sampleThemeUrl);
+            assert.equal(result.url, resolveReferenceUri(appBaseUrl, sampleThemeUrl));
         });
 
         it("resolves absolute url of theme loaded from relative url", async function() {
-            // `sampleThemeUrl` may be absolute, but on same host (or fs), so relativize it
-            const relativeToAppUrl = makeUrlRelative(appBaseUrl, sampleThemeUrl);
-
-            const result = await ThemeLoader.load(relativeToAppUrl);
-            assert.equal(result.url, resolveReferenceUri(appBaseUrl, relativeToAppUrl));
+            const result = await ThemeLoader.load(sampleThemeUrl);
+            assert.equal(result.url, resolveReferenceUri(appBaseUrl, sampleThemeUrl));
         });
 
         it("resolves urls of resources embedded in theme", async function() {
@@ -98,9 +74,7 @@ describe("ThemeLoader", function() {
         });
 
         it("doesn't break if called on already #load-ed theme", async function() {
-            const relativeToAppUrl = makeUrlRelative(appBaseUrl, sampleThemeUrl);
-
-            const firstLoadResult = await ThemeLoader.load(relativeToAppUrl);
+            const firstLoadResult = await ThemeLoader.load(sampleThemeUrl);
             const firstResultCopy = cloneDeep(firstLoadResult);
             const secondLoadResult = await ThemeLoader.load(firstLoadResult);
 

diff --git a/@here/harp-webpack-utils/package.json b/@here/harp-webpack-utils/package.json
@@ -26,18 +26,14 @@
         "harpgl"
     ],
     "dependencies": {
-        "copy-webpack-plugin": "^6.0.3",
-        "html-webpack-plugin": "^4.3.0",
+        "copy-webpack-plugin": "^6.3.2",
+        "html-webpack-plugin": "^5.0.0-alpha.14",
         "webpack-merge": "^4.2.2"
     },
     "peerDependencies": {
-        "webpack": "^5.3.0"
+        "webpack": "^5.9.0"
     },
     "devDependencies": {
-        "@types/copy-webpack-plugin": "^6.0.0",
-        "@types/html-webpack-plugin": "^3.2.3",
-        "@types/webpack": "^4.41.13",
-        "@types/webpack-merge": "^4.1.5",
         "cross-env": "^7.0.2",
         "ts-node": "^8.10.1",
         "typescript": "^3.9.3"

diff --git a/@here/harp-webpack-utils/scripts/HarpWebpackConfig.ts b/@here/harp-webpack-utils/scripts/HarpWebpackConfig.ts
@@ -4,10 +4,20 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import * as CopyWebpackPlugin from "copy-webpack-plugin";
+// The typings don't yet work for copy-webpack-plugin & webpack 5, hence we ignore them for now,
+// see: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/49528
+const CopyWebpackPlugin: any = require("copy-webpack-plugin");
+// Uncomment this when the above issue is fixed.
+//import * as CopyWebpackPlugin from "copy-webpack-plugin";
+
 import * as HtmlWebpackPlugin from "html-webpack-plugin";
-import { Configuration, Plugin } from "webpack";
-import * as WebpackMerge from "webpack-merge";
+import { Configuration, WebpackPluginInstance } from "webpack";
+
+// As above, the typings don't work for webpack-merge, see:
+// https://github.com/DefinitelyTyped/DefinitelyTyped/issues/49757
+const WebpackMerge: any = require("webpack-merge");
+// Uncomment this when the above issue is fixed.
+//import * as WebpackMerge from "webpack-merge";
 
 export interface HarpWebpackConfig {
     mainEntry?: string;
@@ -98,7 +108,7 @@ export function addHarpWebpackConfig(config?: Configuration, harpConfig?: HarpWe
     return bundles;
 }
 
-function createPlugins(htmlTemplate?: string): Plugin[] {
+function createPlugins(htmlTemplate?: string): WebpackPluginInstance[] {
     const plugins = [
         new CopyWebpackPlugin({
             patterns: [

diff --git a/@here/harp.gl/package.json b/@here/harp.gl/package.json
@@ -53,10 +53,10 @@
         "@here/harp-vectortile-datasource": "^0.21.1",
         "@here/harp-webtile-datasource": "^0.21.1",
         "@microsoft/api-extractor": "^7.8.10",
-        "ts-loader": "^7.0.5",
+        "ts-loader": "^8.0.7",
         "typescript": "^3.9.3",
-        "webpack": "^4.43.0",
-        "webpack-cli": "^3.3.11",
+        "webpack": "^5.9.0",
+        "webpack-cli": "^4.2.0",
         "webpack-merge": "^4.1.1"
     },
     "publishConfig": {

diff --git a/@here/harp.gl/webpack.config.js b/@here/harp.gl/webpack.config.js
@@ -8,7 +8,6 @@
 
 const fs = require("fs");
 const webpack = require("webpack");
-const HardSourceWebpackPlugin = require("hard-source-webpack-plugin");
 
 const path = require("path");
 const merge = require("webpack-merge");
@@ -49,20 +48,25 @@ const commonConfig = {
     plugins: [
         new webpack.EnvironmentPlugin({
             // default NODE_ENV to development. Override by setting the environment variable NODE_ENV to 'production'
-            NODE_ENV: process.env.NODE_ENV || "development"
-        })
+            NODE_ENV: "development"
+        }),
+        new webpack.DefinePlugin({
+            'process.platform': JSON.stringify(process.platform)
+            }),
     ],
     performance: {
         hints: false
     },
     // @ts-ignore
-    mode: process.env.NODE_ENV || "development"
+    mode: process.env.NODE_ENV || "development",
+    cache: process.env.HARP_NO_HARD_SOURCE_CACHE ? false :{
+        type: "filesystem",
+        buildDependencies: {
+            config: [ __filename ]
+        }
+    }
 };
 
-if (!process.env.HARP_NO_HARD_SOURCE_CACHE) {
-    commonConfig.plugins.push(new HardSourceWebpackPlugin());
-}
-
 const mapComponentConfig = merge(commonConfig, {
     entry: path.resolve(__dirname, "./lib/index.ts"),
     output: {
@@ -73,9 +77,10 @@ const mapComponentConfig = merge(commonConfig, {
         {
             three: "THREE"
         },
-        function(context, request, callback) {
-            // @ts-ignore
-            return /three\.module\.js$/.test(request) ? callback(null, "THREE") : callback();
+        ({context, request}, callback) => {
+            return /three\.module\.js$/.test(request)
+                ? callback(null, "THREE")
+                : callback(undefined, undefined)
         }
     ]
 });
@@ -89,9 +94,10 @@ const mapComponentDecoderConfig = merge(commonConfig, {
         {
             three: "THREE"
         },
-        function(context, request, callback) {
-            // @ts-ignore
-            return /three\.module\.js$/.test(request) ? callback(null, "THREE") : callback();
+        ({context, request}, callback) => {
+            return /three\.module\.js$/.test(request)
+                ? callback(null, "THREE")
+                : callback(undefined, undefined)
         }
     ]
 });