Backport #1037 to 8.x (#1039)

Author: JLHwung

.github/workflows/ci.yml

@@ -10,7 +10,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v1
         with:
-          node-version: "*"
+          node-version: "18.x"
       - name: Install dependencies
         run: yarn
       - name: Lint

package.json

@@ -44,7 +44,7 @@
     "react-intl-webpack-plugin": "^0.3.0",
     "rimraf": "^3.0.0",
     "semver": "7.3.2",
-    "webpack": "^5.34.0"
+    "webpack": "^5.61.0"
   },
   "scripts": {
     "clean": "rimraf lib/",

src/cache.js

@@ -93,21 +93,27 @@ const handleCache = async function (directory, params) {
     cacheIdentifier,
     cacheDirectory,
     cacheCompression,
+    logger,
   } = params;
 
   const file = path.join(directory, filename(source, cacheIdentifier, options));
 
   try {
     // No errors mean that the file was previously cached
     // we just need to return it
+    logger.debug(`reading cache file '${file}'`);
     return await read(file, cacheCompression);
-  } catch (err) {}
+  } catch (err) {
+    // conitnue if cache can't be read
+    logger.debug(`discarded cache as it can not be read`);
+  }
 
   const fallback =
     typeof cacheDirectory !== "string" && directory !== os.tmpdir();
 
   // Make sure the directory exists.
   try {
+    logger.debug(`creating cache folder '${directory}'`);
     await makeDir(directory);
   } catch (err) {
     if (fallback) {
@@ -119,12 +125,14 @@ const handleCache = async function (directory, params) {
 
   // Otherwise just transform the file
   // return it to the user asap and write it in cache
+  logger.debug(`applying Babel transform`);
   const result = await transform(source, options);
 
   // Do not cache if there are external dependencies,
   // since they might change and we cannot control it.
   if (!result.externalDependencies.length) {
     try {
+      logger.debug(`writing result to cache file '${file}'`);
       await write(file, cacheCompression, result);
     } catch (err) {
       if (fallback) {

src/index.js

@@ -54,6 +54,7 @@ function makeLoader(callback) {
 
 async function loader(source, inputSourceMap, overrides) {
   const filename = this.resourcePath;
+  const logger = this.getLogger("babel-loader");
 
   let loaderOptions = loaderUtils.getOptions(this);
 
@@ -80,17 +81,20 @@ async function loader(source, inputSourceMap, overrides) {
       );
     }
 
+    logger.debug(`loading customize override: '${loaderOptions.customize}'`);
     let override = require(loaderOptions.customize);
     if (override.__esModule) override = override.default;
 
     if (typeof override !== "function") {
       throw new Error("Custom overrides must be functions.");
     }
+    logger.debug("applying customize override to @babel/core");
     overrides = override(babel);
   }
 
   let customOptions;
   if (overrides && overrides.customOptions) {
+    logger.debug("applying overrides customOptions() to loader options");
     const result = await overrides.customOptions.call(this, loaderOptions, {
       source,
       map: inputSourceMap,
@@ -115,6 +119,7 @@ async function loader(source, inputSourceMap, overrides) {
     );
   }
 
+  logger.debug("normalizing loader options");
   // Standardize on 'sourceMaps' as the key passed through to Webpack, so that
   // users may safely use either one alongside our default use of
   // 'this.sourceMap' below without getting error about conflicting aliases.
@@ -161,12 +166,14 @@ async function loader(source, inputSourceMap, overrides) {
 
   // babel.loadPartialConfigAsync is available in v7.8.0+
   const { loadPartialConfigAsync = babel.loadPartialConfig } = babel;
+  logger.debug("resolving Babel configs");
   const config = await loadPartialConfigAsync(
     injectCaller(programmaticOptions, this.target),
   );
   if (config) {
     let options = config.options;
     if (overrides && overrides.config) {
+      logger.debug("applying overrides config() to Babel config");
       options = await overrides.config.call(this, config, {
         source,
         map: inputSourceMap,
@@ -197,35 +204,44 @@ async function loader(source, inputSourceMap, overrides) {
 
     let result;
     if (cacheDirectory) {
+      logger.debug("cache is enabled");
       result = await cache({
         source,
         options,
         transform,
         cacheDirectory,
         cacheIdentifier,
         cacheCompression,
+        logger,
       });
     } else {
+      logger.debug("cache is disabled, applying Babel transform");
       result = await transform(source, options);
     }
 
     // Availabe since Babel 7.12
     // https://github.com/babel/babel/pull/11907
     if (config.files) {
-      config.files.forEach(configFile => this.addDependency(configFile));
+      config.files.forEach(configFile => {
+        this.addDependency(configFile);
+        logger.debug(`added '${configFile}' to webpack dependencies`);
+      });
     } else {
       // .babelrc.json
       if (typeof config.babelrc === "string") {
         this.addDependency(config.babelrc);
+        logger.debug(`added '${config.babelrc}' to webpack dependencies`);
       }
       // babel.config.js
       if (config.config) {
         this.addDependency(config.config);
+        logger.debug(`added '${config.config}' to webpack dependencies`);
       }
     }
 
     if (result) {
       if (overrides && overrides.result) {
+        logger.debug("applying overrides result() to Babel transform results");
         result = await overrides.result.call(this, result, {
           source,
           map: inputSourceMap,
@@ -237,9 +253,13 @@ async function loader(source, inputSourceMap, overrides) {
 
       const { code, map, metadata, externalDependencies } = result;
 
-      externalDependencies?.forEach(dep => this.addDependency(dep));
+      externalDependencies?.forEach(dep => {
+        this.addDependency(dep);
+        logger.debug(`added '${dep}' to webpack dependencies`);
+      });
       metadataSubscribers.forEach(subscriber => {
         subscribe(subscriber, metadata, this);
+        logger.debug(`invoked metadata subscriber '${String(subscriber)}'`);
       });
 
       return [code, map];

test/cache.test.js

@@ -385,3 +385,39 @@ test.cb("should allow to specify the .babelrc file", t => {
     });
   });
 });
+
+test.cb(
+  "should output debug logs when stats.loggingDebug includes babel-loader",
+  t => {
+    const config = Object.assign({}, globalConfig, {
+      output: {
+        path: t.context.directory,
+      },
+      module: {
+        rules: [
+          {
+            test: /\.jsx?/,
+            loader: babelLoader,
+            exclude: /node_modules/,
+            options: {
+              cacheDirectory: true,
+              presets: ["@babel/preset-env"],
+            },
+          },
+        ],
+      },
+      stats: {
+        loggingDebug: ["babel-loader"],
+      },
+    });
+
+    webpack(config, (err, stats) => {
+      t.is(err, null);
+      t.regex(
+        stats.toString(config.stats),
+        /normalizing loader options\n\s+resolving Babel configs\n\s+cache is enabled\n\s+reading cache file.+\n\s+discarded cache as it can not be read\n\s+creating cache folder.+\n\s+applying Babel transform\n\s+writing result to cache file.+\n\s+added '.+babel.config.json' to webpack dependencies/,
+      );
+      t.end();
+    });
+  },
+);

test/loader.test.js

@@ -216,3 +216,26 @@ test.cb("should track external dependencies", t => {
     t.end();
   });
 });
+
+test.cb(
+  "should output debug logs when stats.loggingDebug includes babel-loader",
+  t => {
+    const config = Object.assign({}, globalConfig, {
+      output: {
+        path: t.context.directory,
+      },
+      stats: {
+        loggingDebug: ["babel-loader"],
+      },
+    });
+
+    webpack(config, (err, stats) => {
+      t.is(err, null);
+      t.regex(
+        stats.toString(config.stats),
+        /normalizing loader options\n\s+resolving Babel configs\n\s+cache is disabled, applying Babel transform/,
+      );
+      t.end();
+    });
+  },
+);