⬆️ Update to Webpack 5

Author: legitatx

package.json

@@ -50,54 +50,54 @@
     "hot-reload"
   ],
   "dependencies": {
-    "@types/webpack": "^4.41.26",
+    "@types/webpack": "^5.28.0",
     "@types/webpack-sources": "^2.1.0",
     "colors": "^1.4.0",
     "lodash": "^4.17.21",
     "minimist": "^1.2.5",
     "useragent": "^2.3.0",
-    "webextension-polyfill": "^0.7.0",
-    "webpack-sources": "^2.2.0",
-    "ws": "^7.4.3"
+    "webextension-polyfill": "^0.8.0",
+    "webpack-sources": "^2.3.0",
+    "ws": "^7.5.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.13.8",
-    "@babel/plugin-proposal-class-properties": "^7.13.0",
-    "@babel/plugin-proposal-logical-assignment-operators": "^7.13.8",
-    "@babel/plugin-proposal-object-rest-spread": "^7.13.8",
+    "@babel/core": "^7.14.6",
+    "@babel/plugin-proposal-class-properties": "^7.14.5",
+    "@babel/plugin-proposal-logical-assignment-operators": "^7.14.5",
+    "@babel/plugin-proposal-object-rest-spread": "^7.14.7",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-regenerator": "^7.12.13",
+    "@babel/plugin-transform-regenerator": "^7.14.5",
     "@babel/polyfill": "^7.6.0",
-    "@babel/preset-env": "^7.13.9",
-    "@types/chai": "^4.2.15",
+    "@babel/preset-env": "^7.14.7",
+    "@types/chai": "^4.2.19",
     "@types/colors": "^1.2.1",
-    "@types/lodash": "^4.14.168",
+    "@types/lodash": "^4.14.170",
     "@types/minimist": "^1.2.1",
-    "@types/mocha": "^8.2.1",
-    "@types/sinon": "^9.0.10",
+    "@types/mocha": "^8.2.2",
+    "@types/sinon": "^10.0.2",
     "@types/useragent": "^2.3.0",
-    "@types/ws": "^7.4.0",
-    "autoprefixer": "^10.2.4",
+    "@types/ws": "^7.4.5",
+    "autoprefixer": "^10.2.6",
     "babel-loader": "^8.2.2",
-    "chai": "^4.3.3",
-    "copy-webpack-plugin": "^8.0.0",
-    "css-loader": "^5.1.1",
-    "husky": "^5.1.3",
+    "chai": "^4.3.4",
+    "copy-webpack-plugin": "^9.0.0",
+    "css-loader": "^5.2.6",
+    "husky": "^6.0.0",
     "json-loader": "^0.5.7",
-    "lint-staged": "^10.5.4",
-    "mini-css-extract-plugin": "^1.3.9",
-    "mocha": "^8.3.0",
-    "prettier": "^2.2.1",
+    "lint-staged": "^11.0.0",
+    "mini-css-extract-plugin": "^1.6.0",
+    "mocha": "^9.0.1",
+    "prettier": "^2.3.1",
     "raw-loader": "^4.0.2",
-    "sinon": "^9.2.4",
+    "sinon": "^11.1.1",
     "source-map-support": "^0.5.19",
-    "style-loader": "^2.0.0",
-    "ts-loader": "^8.0.17",
+    "style-loader": "^3.0.0",
+    "ts-loader": "^9.2.3",
     "tslint": "^5.20.1",
     "tslint-config-prettier": "^1.18.0",
-    "typescript": "^4.2.3",
-    "webpack": "^5.24.3",
-    "webpack-bundle-analyzer": "^4.4.0",
-    "webpack-cli": "^4.5.0"
+    "typescript": "^4.3.4",
+    "webpack": "5.40.0",
+    "webpack-bundle-analyzer": "^4.4.2",
+    "webpack-cli": "4.7.2"
   }
 }

src/ExtensionReloader.ts

@@ -1,5 +1,5 @@
 import { merge } from "lodash";
-import { Compiler, Entry, Output, version } from "webpack";
+import { Compiler, Compilation, Chunk, Entry, version } from "webpack";
 import { changesTriggerer } from "./hot-reload";
 import { onlyOnDevelopmentMsg } from "./messages/warnings";
 import { middlewareInjector } from "./middleware";
@@ -35,14 +35,16 @@ export default class ExtensionReloaderImpl extends AbstractPluginReloader
   }
 
   public _whatChanged(
-    chunks: IWebpackChunk[],
+    chunks: Compilation["chunks"],
     { background, contentScript, extensionPage }: IEntriesOption,
   ) {
-    const changedChunks = chunks.filter(({ name, hash }) => {
-      const oldVersion = this._chunkVersions[name];
-      this._chunkVersions[name] = hash;
-      return hash !== oldVersion;
-    });
+    const changedChunks = [] as Chunk[];
+
+    for (const chunk of chunks) {
+      const oldVersion = this._chunkVersions[chunk.name];
+      this._chunkVersions[chunk.name] = chunk.hash;
+      if (chunk.hash !== oldVersion) changedChunks.push(chunk);
+    }
 
     const contentOrBgChanged = changedChunks.some(({ name }) => {
       let contentChanged = false;
@@ -57,6 +59,7 @@ export default class ExtensionReloaderImpl extends AbstractPluginReloader
       return contentChanged || bgChanged;
     });
 
+    //
     const onlyPageChanged =
       !contentOrBgChanged &&
       changedChunks.some(({ name }) => {
@@ -67,6 +70,7 @@ export default class ExtensionReloaderImpl extends AbstractPluginReloader
         } else {
           pageChanged = name === extensionPage;
         }
+        //
 
         return pageChanged;
       });
@@ -83,7 +87,7 @@ export default class ExtensionReloaderImpl extends AbstractPluginReloader
     const parsedEntries: IEntriesOption = manifest
       ? extractEntries(
           compiler.options.entry as Entry,
-          compiler.options.output as Output,
+          compiler.options.output as Compiler["options"]["output"],
           manifest,
         )
       : entries;
@@ -98,16 +102,14 @@ export default class ExtensionReloaderImpl extends AbstractPluginReloader
       };
     });
 
-    this._eventAPI.afterEmit((comp, done) => {
+    this._eventAPI.afterEmit(comp => {
       const { contentOrBgChanged, onlyPageChanged } = this._whatChanged(
         comp.chunks,
         parsedEntries,
       );
 
       if (contentOrBgChanged || onlyPageChanged) {
-        this._triggerer(onlyPageChanged)
-          .then(done)
-          .catch(done);
+        this._triggerer(onlyPageChanged);
       }
     });
   }

src/hot-reload/SignEmitter.ts

@@ -17,7 +17,7 @@ export default class SignEmitter {
   private _safeSignChange: (
     reloadPage: boolean,
     onlyPageChanged: boolean,
-    onSuccess: () => void,
+    onSuccess: (val?: any) => void,
     onError: (err: Error) => void,
   ) => void;
   private _server: Server;

src/middleware/middleware-injector.ts

@@ -1,3 +1,4 @@
+import { Compilation } from "webpack";
 import { ConcatSource, Source } from "webpack-sources";
 import { SourceFactory } from "../../typings";
 import middleWareSourceBuilder from "./middleware-source-builder";
@@ -17,10 +18,11 @@ const middlewareInjector: MiddlewareInjector = (
     name === extensionPage ||
     (extensionPage && extensionPage.includes(name));
 
-  return (assets, chunks) =>
-    chunks.reduce((prev, { name, files }) => {
+  return (assets, chunks: Compilation["chunks"]) =>
+    Array.from(chunks).reduce((prev, { name, files }) => {
       if (matchBgOrContentOrPage(name)) {
-        files.forEach(entryPoint => {
+        files.forEach((entryPoint) => {
+          console.log(`Entry point: ${entryPoint}`);
           if (/\.js$/.test(entryPoint)) {
             const finalSrc = sourceFactory(source, assets[entryPoint]);
             prev[entryPoint] = finalSrc;

src/middleware/wer-middleware.raw.ts

@@ -7,12 +7,13 @@
 /* -------------------------------------------------- */
 (function(window) {
 
-  const injectionContext = {browser: null};
+  const injectionContext = window || this || {browser: null};
+
   (function() {
     `<%= polyfillSource %>`;
   }).bind(injectionContext)();
 
-  const { browser }: any = injectionContext;
+  const { browser }: any = injectionContext || {};
   const signals: any = JSON.parse('<%= signals %>');
   const config: any = JSON.parse('<%= config %>');
 
@@ -27,7 +28,7 @@
   } = signals;
   const { RECONNECT_INTERVAL, SOCKET_ERR_CODE_REF } = config;
 
-  const { extension, runtime, tabs } = browser;
+  const { extension, runtime, tabs } = browser || {};
   const manifest = runtime.getManifest();
 
   // =============================== Helper functions ======================================= //
@@ -38,9 +39,10 @@
 
   // ========================== Called only on content scripts ============================== //
   function contentScriptWorker() {
+    console.log('contentScriptWorker')
     runtime.sendMessage({ type: SIGN_CONNECT }).then(msg => console.info(msg));
 
-    runtime.onMessage.addListener(({ type, payload }: IAction) => {
+    runtime.onMessage.addListener(({ type, payload }: { type: string; payload: any }) => {
       switch (type) {
         case SIGN_RELOAD:
           logger("Detected Changes. Reloading ...");
@@ -56,7 +58,7 @@
 
   // ======================== Called only on background scripts ============================= //
   function backgroundWorker(socket: WebSocket) {
-    runtime.onMessage.addListener((action: IAction, sender) => {
+    runtime.onMessage.addListener((action: { type: string; payload: any }, sender) => {
       if (action.type === SIGN_CONNECT) {
         return Promise.resolve(formatter("Connected to Extension Hot Reloader"));
       }
@@ -114,7 +116,7 @@
   function extensionPageWorker() {
     runtime.sendMessage({ type: SIGN_CONNECT }).then(msg => console.info(msg));
 
-    runtime.onMessage.addListener(({ type, payload }: IAction) => {
+    runtime.onMessage.addListener(({ type, payload }: { type: string; payload: any }) => {
       switch (type) {
         case SIGN_CHANGE:
           logger("Detected Changes. Reloading ...");

src/utils/manifest.ts

@@ -1,14 +1,14 @@
 import { readFileSync } from "fs";
 import { flatMapDeep } from "lodash";
-import { Entry, Output } from "webpack";
+import { Compiler, Entry } from "webpack";
 import {
   bgScriptEntryErrorMsg,
   bgScriptManifestRequiredMsg,
 } from "../messages/errors";
 
 export function extractEntries(
   webpackEntry: Entry,
-  webpackOutput: Output = {},
+  webpackOutput: Compiler["options"]["output"] = {},
   manifestPath: string,
 ): IEntriesOption {
   const manifestJson = JSON.parse(
@@ -28,9 +28,9 @@ export function extractEntries(
   const bgScriptFileNames = background.scripts;
   const toRemove = (filename as string).replace("[name]", "");
 
-  const bgWebpackEntry = Object.keys(webpackEntry).find(entryName =>
+  const bgWebpackEntry = Object.keys(webpackEntry).find((entryName) =>
     bgScriptFileNames.some(
-      bgManifest => bgManifest.replace(toRemove, "") === entryName,
+      (bgManifest) => bgManifest.replace(toRemove, "") === entryName,
     ),
   );
 
@@ -39,11 +39,11 @@ export function extractEntries(
   }
 
   const contentEntries: unknown = content_scripts
-    ? flatMapDeep(Object.keys(webpackEntry), entryName =>
+    ? flatMapDeep(Object.keys(webpackEntry), (entryName) =>
         content_scripts.map(({ js }) =>
           js
-            .map(contentItem => contentItem.replace(toRemove, ""))
-            .filter(contentItem => contentItem === entryName),
+            .map((contentItem) => contentItem.replace(toRemove, ""))
+            .filter((contentItem) => contentItem === entryName),
         ),
       )
     : null;

src/webpack/AbstractExtensionReloader.ts

@@ -1,7 +1,7 @@
-import { Compiler, Plugin } from "webpack";
+import { Compiler } from "webpack";
 import CompilerEventsFacade from "./CompilerEventsFacade";
 
-export default abstract class AbstractExtensionReloader implements Plugin {
+export default abstract class AbstractExtensionReloader {
   public context: any;
   protected _injector: InjectMiddleware;
   protected _triggerer: Triggerer;

src/webpack/CompilerEventsFacade.ts

@@ -1,35 +1,37 @@
-import { Compiler } from "webpack";
+import { Compiler, Compilation } from "webpack";
 
 export default class CompilerEventsFacade {
   public static extensionName = "webpack-extension-reloader";
   private _compiler: Compiler;
   private _legacyTapable: boolean;
 
-  constructor(compiler) {
+  constructor(compiler: Compiler) {
     this._compiler = compiler;
     this._legacyTapable = !compiler.hooks;
   }
 
-  public afterOptimizeChunkAssets(call) {
+  public afterOptimizeChunkAssets(
+    call: (compilation: Compilation, chunks: Compilation["chunks"]) => void,
+  ) {
     return this._legacyTapable
-      ? this._compiler.plugin("compilation", comp =>
-          comp.plugin("after-optimize-chunk-assets", chunks =>
+      ? (this._compiler as any).plugin("compilation", (comp) =>
+          comp.plugin("after-optimize-chunk-assets", (chunks) =>
             call(comp, chunks),
           ),
         )
       : this._compiler.hooks.compilation.tap(
           CompilerEventsFacade.extensionName,
-          comp =>
+          (comp) =>
             comp.hooks.afterOptimizeChunkAssets.tap(
               CompilerEventsFacade.extensionName,
-              chunks => call(comp, chunks),
+              (chunks) => call(comp, chunks),
             ),
         );
   }
 
-  public afterEmit(call) {
+  public afterEmit(call: (compilation: Compilation) => void) {
     return this._legacyTapable
-      ? this._compiler.plugin("after-emit", call)
+      ? (this._compiler as any).plugin("after-emit", call)
       : this._compiler.hooks.afterEmit.tap(
           CompilerEventsFacade.extensionName,
           call,

typings/declarations.d.ts

@@ -12,7 +12,7 @@ declare interface IMiddlewareTemplateParams {
 
 declare type InjectMiddleware = (
   assets: Record<string, any>,
-  chunks: IWebpackChunk[],
+  chunks: Set<any>,
 ) => Record<string, any>;
 
 declare type MiddlewareInjector = (