Update definition files in watch mode in webpack@5 (#1249)

* Add afterDeclarations to getCustomTransformers in README.md

* Emit d.ts file in subsequent runs in watch mode

* Update package.json and changelog.md

CHANGELOG.md

@@ -1,4 +1,9 @@
 # Changelog
+
+## v8.0.15
+* [Update definition files in watch mode in webpack@5](https://github.com/TypeStrong/ts-loader/pull/1249) - thanks @appzuka,@JonWallsten,@alexander-akait
+* [Add afterDeclarations to getCustomTransformers in README.md](https://github.com/TypeStrong/ts-loader/pull/1248) - thanks @appzuka
+
 ## v8.0.14
 * [Upgrade `chalk`, `loader-utils`, and `semver` to latest stable versions](https://github.com/TypeStrong/ts-loader/pull/1237) - thanks Avi Vahl
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ts-loader",
-  "version": "8.0.14",
+  "version": "8.0.15",
   "description": "TypeScript loader for webpack",
   "main": "index.js",
   "types": "dist",

src/instances.ts

@@ -336,21 +336,33 @@ const addAssetHooks = !!webpack.version!.match(/^4.*/)
         makeAfterCompile(instance, false, true, instance.configFilePath)
       );
 
-      // Emit the assets at the afterProcessAssets stage
-      loader._compilation.hooks.afterProcessAssets.tap(
-        'ts-loader',
-        (_: any) => {
-          makeAfterCompile(
-            instance,
-            true,
-            false,
-            instance.configFilePath
-          )(loader._compilation, () => {
-            return null;
-          });
-        }
+      // makeAfterCompile is a closure.  It returns a function which closes over the variable checkAllFilesForErrors
+      // We need to get the function once and then reuse it, otherwise it will be recreated each time
+      // and all files will always be checked.
+      const cachedMakeAfterCompile = makeAfterCompile(
+        instance,
+        true,
+        false,
+        instance.configFilePath
       );
 
+      // compilation is actually of type webpack.compilation.Compilation, but afterProcessAssets
+      // only exists in webpack5 and at the time of writing ts-loader is built using webpack4
+      const makeAssetsCallback = (compilation: any) => {
+        compilation.hooks.afterProcessAssets.tap('ts-loader', () =>
+          cachedMakeAfterCompile(compilation, () => {
+            return null;
+          })
+        );
+      };
+
+      // We need to add the hook above for each run.
+      // For the first run, we just need to add the hook to loader._compilation
+      makeAssetsCallback(loader._compilation);
+
+      // For future calls in watch mode we need to watch for a new compilation and add the hook
+      loader._compiler.hooks.compilation.tap('ts-loader', makeAssetsCallback);
+
       // It may be better to add assets at the processAssets stage (https://webpack.js.org/api/compilation-hooks/#processassets)
       // This requires Compilation.PROCESS_ASSETS_STAGE_ADDITIONAL, which does not exist in webpack4
       // Consider changing this when ts-loader is built using webpack5