🐛 Fix asset process stage (Closes #507)

Author: vialoh

src/ExtensionReloader.ts

@@ -87,7 +87,7 @@ export default class ExtensionReloaderImpl extends AbstractPluginReloader implem
 
     this._eventAPI = new CompilerEventsFacade(compiler);
     this._injector = middlewareInjector(parsedEntries, { port, reloadPage });
-    this._eventAPI.afterOptimizeChunks((comp, chunks) => {
+    this._eventAPI.beforeOptimizeChunks((comp, chunks) => {
       comp.assets = {
         ...comp.assets,
         ...this._injector(comp.assets, chunks),

src/middleware/middleware-injector.ts

@@ -1,11 +1,9 @@
 import { Compilation } from 'webpack';
-import { ConcatSource, Source } from 'webpack-sources';
-import { SourceFactory } from '../../typings';
+import { ConcatSource } from 'webpack-sources';
 import middleWareSourceBuilder from './middleware-source-builder';
 
 const middlewareInjector: MiddlewareInjector = ({ background, contentScript, extensionPage }, { port, reloadPage }) => {
-  const source: Source = middleWareSourceBuilder({ port, reloadPage });
-  const sourceFactory: SourceFactory = (...sources): Source => new ConcatSource(...sources);
+  const middlewareSource = middleWareSourceBuilder({ port, reloadPage });
 
   const matchBgOrContentOrPage = (name: string) =>
     name === background ||
@@ -19,8 +17,7 @@ const middlewareInjector: MiddlewareInjector = ({ background, contentScript, ext
       if (matchBgOrContentOrPage(name as string)) {
         files.forEach((entryPoint) => {
           if (/\.js$/.test(entryPoint)) {
-            const finalSrc = sourceFactory(source, assets[entryPoint]);
-            prev[entryPoint] = finalSrc;
+            prev[entryPoint] = new ConcatSource(middlewareSource, assets[entryPoint]);
           }
         });
       }

src/middleware/middleware-source-builder.ts

@@ -1,12 +1,12 @@
 import { template } from 'lodash';
 import rawSource from 'raw-loader!./wer-middleware.raw';
 import polyfillSource from 'raw-loader!webextension-polyfill';
-import { RawSource, Source } from 'webpack-sources';
+import { RawSource } from 'webpack-sources';
 
 import { RECONNECT_INTERVAL, SOCKET_ERR_CODE_REF } from '../constants/middleware-config.constants';
 import * as signals from '../utils/signals';
 
-export default function middleWareSourceBuilder({ port, reloadPage }: IMiddlewareTemplateParams): Source {
+export default function middleWareSourceBuilder({ port, reloadPage }: IMiddlewareTemplateParams): RawSource {
   const tmpl = template(rawSource);
 
   return new RawSource(

src/webpack/CompilerEventsFacade.ts

@@ -9,22 +9,22 @@ export default class CompilerEventsFacade {
     this._compiler = compiler;
   }
 
-  public afterOptimizeChunks(call: (compilation: Compilation, chunks: Compilation['chunks']) => void) {
+  public beforeOptimizeChunks(call: (compilation: Compilation, chunks: Compilation['chunks']) => void) {
     return this._compiler.hooks.compilation.tap(CompilerEventsFacade.extensionName, (comp) => {
       const chunks = new Set();
-      const afterOptimizeChunkAssets = (chunksAfterOptimization) => {
-        call(comp, chunksAfterOptimization);
+      const beforeOptimizeChunkAssets = (chunksBeforeOptimization) => {
+        call(comp, chunksBeforeOptimization);
       };
       comp.hooks.processAssets.tap(
         {
           name: CompilerEventsFacade.extensionName,
-          stage: Compilation.PROCESS_ASSETS_STAGE_ANALYSE,
+          stage: Compilation.PROCESS_ASSETS_STAGE_PRE_PROCESS,
         },
         () => {
           comp.chunks.forEach((chunk) => {
             chunks.add(chunk);
           });
-          afterOptimizeChunkAssets(chunks);
+          beforeOptimizeChunkAssets(chunks);
         },
       );
     });