AssetCompiler.js

const path = require('path');

const { AsyncSeriesHook, AsyncSeriesWaterfallHook, SyncBailHook, SyncWaterfallHook } = require('tapable');
const Compiler = require('webpack/lib/Compiler');
const Compilation = require('webpack/lib/Compilation');
const Cache = require('webpack/lib/Cache');

const AssetParser = require('webpack/lib/asset/AssetParser');
const AssetGenerator = require('webpack/lib/asset/AssetGenerator');
//const JavascriptParser = require('webpack/lib/javascript/JavascriptParser');
//const JavascriptGenerator = require('webpack/lib/javascript/JavascriptGenerator');
const {
  JAVASCRIPT_MODULE_TYPE_AUTO,
  ASSET_MODULE_TYPE,
  ASSET_MODULE_TYPE_INLINE,
  ASSET_MODULE_TYPE_SOURCE,
  ASSET_MODULE_TYPE_RESOURCE,
} = require('webpack/lib//ModuleTypeConstants');

const { yellowBright, cyanBright, green, greenBright, yellow } = require('ansis');

const Config = require('../Common/Config');
const { baseUri, urlPathPrefix, cssLoaderName } = require('../Loader/Utils');
const { findRootIssuer } = require('../Common/CompilationHelpers');
const { isDir } = require('../Common/FileUtils');
const { parseVersion, compareVersions, getQueryParams, getQueryParam, hasQueryParam } = require('../Common/Helpers');
const createPersistentCache = require('./createPersistentCache')();

const CssExtractModule = require('./Modules/CssExtractModule');
const Option = require('./Option');
const PluginService = require('./PluginService');
const Collection = require('./Collection');
const Resolver = require('./Resolver');
const Snapshot = require('./Snapshot');
const UrlDependency = require('./UrlDependency');

const Asset = require('./Asset');
const AssetEntry = require('./AssetEntry');
const AssetResource = require('./AssetResource');
const AssetInline = require('./AssetInline');
const AssetTrash = require('./AssetTrash');
const VMScript = require('../Common/VMScript');
const Integrity = require('./Extras/Integrity');

const { compilationName, verbose } = require('./Messages/Info');
const { PluginError, afterEmitException } = require('./Messages/Exception');
const { outputWarning } = require('./Messages/Warnings');

const loaderPath = require.resolve('../Loader');
const LoaderFactory = require('../Loader/LoaderFactory');

const { pluginName } = Config.get();

/**
 * The CSS loader.
 *
 * @type {{loader: string, ident: undefined, options: undefined, type: undefined}}
 */
const cssLoader = {
  loader: require.resolve('../Loader/cssLoader.js'),
  type: undefined,
  options: undefined,
  ident: undefined,
};

/** @typedef {import('webpack/declarations/WebpackOptions').Output} WebpackOutputOptions */
/** @typedef {import('webpack').Compiler} Compiler */
/** @typedef {import('webpack').Compilation} Compilation */
/** @typedef {import('webpack/lib/FileSystemInfo')} FileSystemInfo */
/** @typedef {import('webpack/lib/FileSystemInfo').Snapshot} FileSystemSnapshot */
/** @typedef {import('webpack').ChunkGraph} ChunkGraph */
/** @typedef {import('webpack').Chunk} Chunk */
/** @typedef {import('webpack').Module} Module */
/** @typedef {import('webpack').sources.Source} Source */
/** @typedef {import('webpack-sources').RawSource} RawSource */
/** @typedef {import('webpack').Configuration} Configuration */
/** @typedef {import('webpack').PathData} PathData */
/** @typedef {import('webpack').AssetInfo} AssetInfo */

/**
 * @typedef {Module} PluginModuleMeta Meta information for module generated by the plugin.
 * @property {boolean} isTemplate
 * @property {boolean} isScript
 * @property {boolean} isStyle
 * @property {boolean} isImportedStyle
 * @property {boolean} isLoaderImport
 * @property {boolean} isDependencyUrl
 */

/**
 * @typedef {Object} FileInfo
 * @property {string} resource The resource file, including a query.
 * @property {string|undefined} filename The output filename.
 */

/** @type {WeakMap<Compilation, HtmlBundlerPlugin.Hooks>} */
const compilationHooksMap = new WeakMap();

let HotUpdateChunk;
let RawSource;

class AssetCompiler {
  static processAssetsPromises = [];

  /** Whether the installed Webpack version < 5.96.0 */
  IS_WEBPACK_VERSION_LOWER_5_96_0 = true;

  /** @type {Array<Promise>} */
  promises = [];

  /** @type AssetEntryOptions The current entry point during dependency compilation. */
  currentEntryPoint;

  /** @type Set<Error> Buffered exceptions thrown in hooks. */
  exceptions = new Set();

  isSnapshotInitialized = false;

  /** @type {Compilation} */
  compilation = null;

  /** @type {Option} The alias to pluginOption for 3rd party plugins */
  option = null;
  pluginOption = null;

  pluginContext = {
    compilation: null,
    asset: null,
    assetEntry: null,
    assetInline: null,
    assetResource: null,
    assetTrash: null,
    collection: null,
    cssExtractModule: null,
    resolver: null,
    /** @type Option */
    pluginOption: null,
    urlDependency: null,
    loaderDependency: null,
  };

  // data file => entry files, uses for watching changes in data file, then recompile entries where it used
  dataFileEntryMap = new Map();

  /** @type {FileSystem} */
  fs = null;

  /**
   * @param {Compilation} compilation The compilation.
   * @returns {HtmlBundlerPlugin.Hooks} The attached hooks.
   */
  static getHooks(compilation) {
    if (!(compilation instanceof Compilation)) {
      throw new TypeError(`The 'compilation' argument must be an instance of Compilation`);
    }

    let hooks = compilationHooksMap.get(compilation);

    if (hooks == null) {
      hooks = {
        // use a bail or waterfall hook when the hook returns something
        beforePreprocessor: new AsyncSeriesWaterfallHook(['content', 'loaderContext']),
        preprocessor: new AsyncSeriesWaterfallHook(['content', 'loaderContext']),
        // TODO: implement afterPreprocessor when will be required the feature
        //afterPreprocessor: new AsyncSeriesWaterfallHook(['content', 'loaderContext']),
        resolveSource: new SyncWaterfallHook(['source', 'info']),
        postprocess: new AsyncSeriesWaterfallHook(['content', 'info']),
        beforeEmit: new AsyncSeriesWaterfallHook(['content', 'entry']),
        afterEmit: new AsyncSeriesHook(['entries']),
        integrityHashes: new AsyncSeriesHook(['hashes']),
      };
      compilationHooksMap.set(compilation, hooks);
    }

    return hooks;
  }

  /**
   * @param {PluginOptions|{}} options
   */
  constructor(options = {}) {
    this.pluginOption = new Option(this.pluginContext, { options, loaderPath: loaderPath });
    this.option = this.pluginOption;
    // TODO: refactor replace all usages this.pluginOption > this.pluginContext.pluginOption
    this.pluginContext.pluginOption = this.pluginOption;

    this.assetTrash = new AssetTrash({ compilation: this.compilation });
    this.pluginContext.assetTrash = this.assetTrash;

    this.collection = new Collection(this.pluginContext);
    this.pluginContext.collection = this.collection;

    this.asset = new Asset();
    this.pluginContext.asset = this.asset;
    this.assetInline = new AssetInline();
    this.pluginContext.assetInline = this.assetInline;

    this.assetEntry = new AssetEntry({ ...this.pluginContext, entryLibrary: this.pluginOption.getEntryLibrary() });
    this.pluginContext.assetEntry = this.assetEntry;

    this.resolver = new Resolver(this.pluginContext);
    this.pluginContext.resolver = this.resolver;

    this.cssExtractModule = new CssExtractModule(this.pluginContext);
    this.pluginContext.cssExtractModule = this.cssExtractModule;

    this.assetResource = new AssetResource(this.pluginContext);
    this.pluginContext.assetResource = this.assetResource;

    this.urlDependency = new UrlDependency(this.pluginContext);
    this.pluginContext.urlDependency = this.urlDependency;

    // bind the instance context for using these methods as references in Webpack hooks
    this.compile = this.compile.bind(this);
    this.invalidate = this.invalidate.bind(this);
    this.afterEntry = this.afterEntry.bind(this);
    this.beforeResolve = this.beforeResolve.bind(this);
    this.afterResolve = this.afterResolve.bind(this);
    this.beforeModule = this.beforeModule.bind(this);
    this.afterCreateModule = this.afterCreateModule.bind(this);
    this.beforeLoader = this.beforeLoader.bind(this);
    this.afterBuildModule = this.afterBuildModule.bind(this);
    this.renderManifest = this.renderManifest.bind(this);
    this.processAssetsOptimizeSize = this.processAssetsOptimizeSize.bind(this);
    this.processAssetsFinalAsync = this.processAssetsFinalAsync.bind(this);
    this.filterAlternativeRequests = this.filterAlternativeRequests.bind(this);
    this.afterEmit = this.afterEmit.bind(this);
    this.done = this.done.bind(this);
    this.shutdown = this.shutdown.bind(this);
    this.watch = this.watch.bind(this);
  }

  /**
   * Called when a compiler object is initialized.
   * Abstract method should be overridden in an extended class.
   *
   * @api
   *
   * @param {Compiler} compiler The instance of the webpack compiler.
   * @abstract
   */
  init(compiler) {}

  /**
   * Add default loader for entry files.
   */
  addLoader() {
    const defaultLoader = {
      test: this.pluginOption.get().test,
      // ignore 'asset/source' with the '?raw' query
      // see https://webpack.js.org/guides/asset-modules/#replacing-inline-loader-syntax
      resourceQuery: { not: [/raw/] },
      loader: loaderPath,
    };

    this.pluginOption.addLoader(defaultLoader);
  }

  /**
   * Add the process to pipeline.
   *
   * @api The public method can be used in an extended plugin.
   *
   * @param {string} name The name of process. Currently supported only `postprocess` pipeline.
   * @param {Function: (content: string) => string} fn The process function to modify the generated content.
   */
  addProcess(name, fn) {
    this.pluginOption.addProcess(name, fn);
  }

  /**
   * Apply plugin.
   *
   * @param {Compiler} compiler
   */
  apply(compiler) {
    if (!this.pluginOption.isEnabled()) return;

    const { webpack } = compiler;
    HotUpdateChunk = webpack.HotUpdateChunk;
    RawSource = webpack.sources.RawSource;

    this.promises = [];
    this.fs = compiler.inputFileSystem.fileSystem;
    this.webpack = webpack;

    LoaderFactory.init(compiler);
    this.pluginContext.loaderDependency = LoaderFactory.createDependency(compiler);

    this.assetEntry.setCompiler(compiler);
    this.pluginOption.initWebpack(compiler);
    this.assetResource.init(compiler);
    this.init(compiler);
    this.addLoader();

    // must be called after all initialisations of the pluginOption
    this.resolver.init({ fs: this.fs });

    // initialize integrity plugin
    this.integrityPlugin = new Integrity(this.pluginOption);

    // clear caches for tests in serve/watch mode
    this.assetEntry.clear();
    this.assetInline.clear();
    this.collection.clear();
    this.resolver.clear();
    this.dataFileEntryMap.clear();
    Snapshot.clear();
    PluginError.clear();

    // let know the loader that the plugin is being used
    // TODO: init by PluginIndex, for each instance create own PluginService instance for pluginOption
    PluginService.init(compiler, this.pluginContext, AssetCompiler);

    this.cacheDataComplete = false;

    if (this.pluginOption.isCacheable()) {
      const collectionCache = createPersistentCache(this.collection);
      const cache = compiler.getCache(pluginName).getItemCache('PersistentCache', null);

      compiler.hooks.beforeCompile.tapPromise(pluginName, () => {
        return cache.getPromise().catch(() => {
          this.collection.clear();
        });
      });

      // Store before Webpack's disk cache shutdown task collects pending cache writes.
      compiler.cache.hooks.shutdown.tap({ name: pluginName, stage: Cache.STAGE_DISK - 1 }, () => {
        if (!this.cacheDataComplete) return;

        const cacheData = collectionCache.getData();

        cache.store(cacheData, (error) => {
          if (error) {
            throw new Error(error);
          }
        });
      });
    }

    // entry option
    this.assetEntry.init({
      fs: this.fs,
    });

    compiler.hooks.watchRun.tap(pluginName, this.watch);
    compiler.hooks.entryOption.tap(pluginName, this.afterEntry);
    compiler.hooks.invalid.tap(pluginName, this.invalidate);
    compiler.hooks.thisCompilation.tap(pluginName, this.compile);
    compiler.hooks.afterEmit.tapPromise(pluginName, this.afterEmit);
    compiler.hooks.done.tapPromise(pluginName, this.done);
    compiler.hooks.shutdown.tap(pluginName, this.shutdown);
    compiler.hooks.watchClose.tap(pluginName, this.shutdown);

    // run integrity plugin
    if (this.pluginOption.isIntegrityEnabled()) this.integrityPlugin.apply(compiler);
  }

  /**
   * Called in watch mode after a new compilation is triggered
   * but before the compilation is actually started.
   *
   * @param {Compiler} compiler
   */
  watch(compiler) {
    // create dependencies map of the entry templates by data file
    if (this.dataFileEntryMap.size === 0) {
      const pluginOption = this.pluginOption.get();
      const globalData = pluginOption.data;

      this.assetEntry.entriesById.forEach((item) => {
        if (item.dataFile) {
          this.dataFileEntryMap.set(item.dataFile, [item.sourceFile]);
        }
      });

      if (typeof globalData === 'string') {
        const revolvedDataFile = PluginService.resolveFile(compiler, globalData);
        const entryFiles = Array.from(this.assetEntry.getEntryFiles());
        this.dataFileEntryMap.set(revolvedDataFile, entryFiles);
      }
    }

    // TODO: avoid double calling by multi-config
    //console.log('===> hooks.watchRun.tap', { id: compiler.name });
    this.pluginOption.initWatchMode();
    PluginService.setWatchMode(compiler, true);
    PluginService.watchRun(compiler);
  }

  /**
   * Compile modules.
   *
   * @param {Compilation} compilation
   * @param {NormalModuleFactory} normalModuleFactory
   * @param {ContextModuleFactory} contextModuleFactory
   */
  compile(compilation, { normalModuleFactory, contextModuleFactory }) {
    const fs = this.fs;
    const { NormalModule, Compilation } = compilation.compiler.webpack;
    const normalModuleHooks = NormalModule.getCompilationHooks(compilation);
    const renderStage = this.pluginOption.getRenderStage();

    this.cacheDataComplete = false;
    this.IS_WEBPACK_VERSION_LOWER_5_96_0 = compareVersions(compilation.compiler.webpack.version, '<', '5.96.0');

    this.compilation = compilation;
    this.pluginContext.compilation = compilation;
    this.assetEntry.setCompilation(compilation);
    this.assetTrash.init(compilation);
    this.cssExtractModule.init(compilation);
    this.urlDependency.init({ compilation, fs });

    this.collection.init({
      hooks: AssetCompiler.getHooks(compilation),
    });

    // resolve modules
    normalModuleFactory.hooks.beforeResolve.tap(pluginName, this.beforeResolve);
    normalModuleFactory.hooks.afterResolve.tap(pluginName, this.afterResolve);
    contextModuleFactory.hooks.alternativeRequests.tap(pluginName, this.filterAlternativeRequests);

    // build modules
    // createModuleClass requires v5.81+
    normalModuleFactory.hooks.createModuleClass.for(JAVASCRIPT_MODULE_TYPE_AUTO).tap(pluginName, this.beforeModule);
    normalModuleFactory.hooks.module.tap(pluginName, this.afterCreateModule);
    compilation.hooks.buildModule.tap(pluginName, this.beforeBuildModule);
    compilation.hooks.succeedModule.tap(pluginName, this.afterBuildModule);

    // called when a module build has failed
    compilation.hooks.failedModule.tap(pluginName, (module, error) => {
      // TODO: collect errors
    });

    // TODO: avoid random index order
    // compilation.hooks.beforeChunkIds.tap(pluginName, (chunks) => {
    //   for (const chunk of chunks) {
    //     if (chunk.name.startsWith('script')) {
    //       // TODO: sort chinks by index and rename chunk.name, chunk.runtime according index
    //       console.log(chunks);
    //     }
    //   }
    // });

    // called after the succeedModule hook but right before the execution of a loader
    normalModuleHooks.loader.tap(pluginName, this.beforeLoader);

    // render source code of modules
    compilation.hooks.renderManifest.tap(pluginName, this.renderManifest);

    // Notes:
    // - the TerserPlugin creates a `.LICENSE.txt` file at the PROCESS_ASSETS_STAGE_OPTIMIZE_SIZE stage
    // - the integrity hash will be created at the next stage, therefore,
    //   the license file and the license banner must be removed before PROCESS_ASSETS_STAGE_OPTIMIZE_INLINE
    compilation.hooks.processAssets.tap(
      { name: pluginName, stage: Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE_SIZE + 1 },
      this.processAssetsOptimizeSize
    );

    // after render module's sources
    // only in the processAssets hook is possible to modify an asset content via async function
    compilation.hooks.processAssets.tapPromise({ name: pluginName, stage: renderStage }, this.processAssetsFinalAsync);

    // output asset info tags in console statistics
    compilation.hooks.statsPrinter.tap(pluginName, (stats) => {
      stats.hooks.print.for('asset.info.minimized').tap(pluginName, (minimized, { green, formatFlag }) => {
        if (!minimized) {
          return '';
        }

        if (!green || !formatFlag) {
          return 'minimized';
        }

        return green(formatFlag('minimized'));
      });
    });
  }

  /* istanbul ignore next: this method is called in watch mode after changes */
  /**
   * Invalidate changed file.
   * Called in serve/watch mode.
   *
   * Limitation: currently supports for change only a single file.
   *
   * TODO: add supports to add/remove many files.
   *      The problem: if added/removed many files,
   *      then webpack calls the 'invalid' hook many times, for each file separately.
   *      Research: find the hook, what called once, before the 'invalid' hook,
   *      to create the snapshot of files after change.
   *
   * @param {string} fileName The old filename before change.
   * @param {Number|null} changeTime
   */
  invalidate(fileName, changeTime) {
    const fs = this.fs;
    const entryDir = this.pluginOption.getEntryPath();
    const isDirectory = isDir({ fs, file: fileName });

    Snapshot.create();

    if (this.dataFileEntryMap.has(fileName)) {
      const entryFiles = this.dataFileEntryMap.get(fileName);

      if (this.pluginOption.isVerbose()) {
        console.log(yellowBright`Modified data file: ${cyanBright(fileName)}`);
      }

      for (const module of this.compilation.modules) {
        const moduleResource = module.resource || '';

        if (moduleResource && entryFiles.find((file) => file === moduleResource)) {
          this.compilation.rebuildModule(module, (error) => {
            if (this.pluginOption.isVerbose()) {
              console.log(greenBright`   -> Rebuild dependency: ${cyanBright(moduleResource)}`);
            }
          });
        }
      }
    }

    if (isDirectory === true) return;

    const { actionType, newFileName, oldFileName } = Snapshot.detectFileChange();
    const isScript = this.pluginOption.isScript(fileName);
    const inCollection = this.collection.hasScript(fileName);
    const isEntryFile = (file) => file && file.startsWith(entryDir) && this.pluginOption.isEntry(file);

    // 1. Invalidate an entry template.

    if (
      this.pluginOption.isDynamicEntry() &&
      (isEntryFile(fileName) || isEntryFile(oldFileName) || isEntryFile(newFileName))
    ) {
      switch (actionType) {
        case 'modify':
          this.collection.disconnectEntry(fileName);
          break;
        case 'add':
          this.assetEntry.addEntry(newFileName);
          this.collection.disconnectEntry(newFileName);
          break;
        case 'rename':
          this.assetEntry.deleteEntry(oldFileName);
          this.assetEntry.addEntry(newFileName);
          break;
        case 'remove':
          this.assetEntry.deleteEntry(oldFileName);
          break;
        default:
          break;
      }

      return;
    }

    // 2. Invalidate a JavaScript file loaded in an entry template.

    if (actionType && isScript) {
      switch (actionType) {
        case 'add':
        // through
        case 'rename':
          const missingFiles = Snapshot.getMissingFiles();
          const { modules } = this.compilation;

          missingFiles.forEach((files, issuer) => {
            const missingFile = Array.from(files).find((file) => newFileName.endsWith(file));

            // if an already used js file was unlinked in html and then renamed
            if (!missingFile) return;

            for (const module of modules) {
              // the same template can be in many modules
              if (module.resource === issuer || module.resource === newFileName) {
                // reset errors for an unresolved js file, because the file can be renamed
                module._errors = [];

                // after rename a js file, try to rebuild the module of the entry file where the js file was linked
                this.compilation.rebuildModule(module, (error) => {
                  // after rebuild, remove the missing file to avoid double rebuilding by another exception
                  Snapshot.deleteMissingFile(issuer, missingFile);
                  this.assetEntry.deleteMissingFile(missingFile);
                });
              }
            }
          });
          break;
        case 'remove':
          // do nothing
          break;
        default:
          break;
      }

      if (inCollection && (actionType === 'remove' || actionType === 'rename')) {
        this.assetEntry.deleteEntry(oldFileName);
      }

      return;
    }

    // 3. if a partial is changed then rebuild all entry templates,
    // because we don't have the dependency graph of the partial on the main template
    const isEntry = this.assetEntry.isEntryResource(fileName);

    if (!isEntry) {
      const dependency = PluginService.getDependencyInstance(this.compilation.compiler);

      // dependency is null when no html entry defined and a style in entry was changed
      if (dependency) {
        const isFileWatchable = dependency.isFileWatchable(fileName);
        const isTemplate = this.pluginOption.isEntry(fileName);

        if (isTemplate || isFileWatchable) {
          if (this.pluginOption.isVerbose()) {
            console.log(yellowBright`Modified partial: ${cyanBright(fileName)}`);
          }

          for (const module of this.compilation.modules) {
            const moduleResource = module.resource || '';

            if (moduleResource && this.assetEntry.isEntryResource(moduleResource)) {
              this.compilation.rebuildModule(module, (error) => {
                if (error) {
                  // TODO: research the strange error - "Cannot read properties of undefined (reading 'state')"
                  //       in node_modules/webpack/lib/util/AsyncQueue.js:196
                }

                if (this.pluginOption.isVerbose()) {
                  console.log(greenBright`   -> Rebuild entrypoint: ${cyanBright(moduleResource)}`);
                }
              });
            }
          }
        }
      }
    }
  }

  /**
   * Called after the entry configuration from webpack options has been processed.
   *
   * @param {string} context The base directory, an absolute path, for resolving entry points and loaders from the configuration.
   * @param {Object<name:string, entry: Object>} entries The webpack entries.
   */
  afterEntry(context, entries) {
    this.assetEntry.addEntries(entries);
  }

  /**
   * Filter alternative requests.
   *
   * Entry files should not have alternative requests.
   * If the template file contains require and is compiled with `compile` mode,
   * then ContextModuleFactory generates additional needless request as the relative path without a query.
   * Such 'alternative request' must be removed from compilation.
   *
   * @param {Array<{}>} requests
   * @param {{}} options
   * @return {Array|undefined} Returns only alternative requests not related to entry files.
   */
  filterAlternativeRequests(requests, options) {
    // skip the request required as 'asset/source' with the '?raw' resourceQuery
    // see https://webpack.js.org/guides/asset-modules/#replacing-inline-loader-syntax
    if (/\?raw/.test(options.resourceQuery)) return;

    return requests.filter((item) => !this.pluginOption.isEntry(item.request));
  }

  /**
   * Called when a new dependency request is encountered.
   *
   * @param {Object} resolveData
   * @return {boolean|undefined} Return undefined to processing, false to ignore dependency.
   */
  beforeResolve(resolveData) {
    const { request, dependencyType } = resolveData;
    const [file] = request.split('?', 1);
    const entryId = this.assetEntry.resolveEntryId(resolveData);

    /** @type PluginModuleMeta */
    const meta = {
      isTemplate: this.assetEntry.isEntryResource(file),
      isScript: false,
      isStyle: false,
      isImportedStyle: false,
      isParentLoaderImport: false,
      isLoaderImport: dependencyType === 'loaderImport',
      isDependencyUrl: dependencyType === 'url',
    };
    resolveData._bundlerPluginMeta = meta;
    resolveData.entryId = entryId;

    /* istanbul ignore next */
    // prevent compilation of renamed or deleted entry point in serve/watch mode
    if (this.pluginOption.isDynamicEntry() && this.assetEntry.isDeletedEntryFile(file)) {
      for (const [entryName, entry] of this.compilation.entries) {
        if (entry.dependencies[0]?.request === request) {
          // delete the entry from compilation to prevent creation unused chunks
          this.compilation.entries.delete(entryName);
        }
      }

      return false;
    }

    if (meta.isDependencyUrl) {
      this.urlDependency.resolve(resolveData);
    }
  }

  /**
   * Called after the request is resolved.
   *
   * @param {Object} resolveData
   * @return {boolean|undefined} Return undefined to processing, false to ignore dependency.
   */
  afterResolve(resolveData) {
    const { request, contextInfo, dependencyType, createData, _bundlerPluginMeta: meta } = resolveData;
    const { resource, type } = createData;
    const [file] = resource.split('?', 1);
    // note: the contextInfo.issuer is the filename w/o a query
    const { issuer } = contextInfo;

    // the filename with an extension is available only after resolve
    meta.isStyle = this.pluginOption.isStyle(file);
    meta.isCSSStyleSheet = this.isCSSStyleSheet(createData);

    // skip modules loaded via importModule, data-URL
    if (meta.isLoaderImport || meta.isCSSStyleSheet || request.startsWith('data:')) return;

    if (issuer) {
      // TODO: refactor into AssetInline
      const isAssetModule = [
        ASSET_MODULE_TYPE,
        ASSET_MODULE_TYPE_INLINE,
        ASSET_MODULE_TYPE_RESOURCE,
        ASSET_MODULE_TYPE_SOURCE,
      ].includes(type);

      if (isAssetModule) {
        let encoding = 'base64'; // default encoding for all resources
        let hasInlineQuery = getQueryParam(resource, 'inline') != null;
        let isInlineSvg = false;
        let svgOptions;

        if (this.assetInline.isSvgFile(resource)) {
          svgOptions = this.pluginOption.getInlineSvgOptions(resource, createData);

          if (svgOptions?.warning) {
            outputWarning(svgOptions.warning);
          }

          isInlineSvg = svgOptions.inline;
          encoding = svgOptions?.encoding;
        }

        // query `?inline`
        if (hasInlineQuery || isInlineSvg) {
          this.setAssetModuleTypeInline(createData);
          this.setAssetModuleEncoding(createData, encoding, hasInlineQuery, svgOptions);
        }
      }

      // skip modules loaded in CSS via url()
      if (meta.isDependencyUrl) return;

      const isIssuerStyle = this.pluginOption.isStyle(issuer);
      const parentModule = resolveData.dependencies[0]?._parentModule;
      const { isLoaderImport } = parentModule?.resourceResolveData?._bundlerPluginMeta || {};

      // skip the module loaded via importModule
      if (isLoaderImport) {
        meta.isParentLoaderImport = true;
        return;
      }

      // exclude from compilation the css-loader runtime scripts for styles specified in HTML only,
      // to avoid splitting the loader runtime scripts;
      // allow runtime scripts for styles imported in JavaScript, regards deep imported styles via url()
      if (isIssuerStyle && file.endsWith('.js')) {
        const rootIssuer = findRootIssuer(this.compilation, issuer);
        meta.isScript = true;

        // return true if the root issuer is a JS (not style and not template), otherwise return false
        return rootIssuer != null && !this.pluginOption.isStyle(rootIssuer) && !this.pluginOption.isEntry(rootIssuer);
      }

      // style loaded in *.vue file
      if (request.includes('?vue&')) {
        const { type } = Object.fromEntries(new URLSearchParams(request).entries());

        if (type === 'style') {
          meta.isStyle = true;
          meta.isVueStyle = true;
        }
      }

      // try to detect imported style as resolved resource file, because a request can be a node module w/o an extension
      // the issuer can be a style if a scss contains like `@import 'main.css'`
      if (!this.pluginOption.isStyle(issuer) && !this.pluginOption.isEntry(issuer) && meta.isStyle) {
        const rootIssuer = findRootIssuer(this.compilation, issuer);

        this.collection.importStyleRootIssuers.add(rootIssuer || issuer);
        meta.isImportedStyle = true;

        if (!createData.request.includes(cssLoader.loader)) {
          // the request of an imported style must be different from the request for the same style specified in a html,
          // otherwise webpack doesn't apply the added loader for the imported style,
          // see the test case js-import-css-same-in-many4
          createData.request = `${cssLoader.loader}!${createData.request}`;

          if (meta.isVueStyle) {
            createData.loaders = this.filterStyleLoaders(createData.loaders, parentModule.loaders);
          } else {
            createData.loaders = [cssLoader, ...createData.loaders];
          }
        }
      }
    }

    meta.isScript = this.collection.hasScript(request);
  }

  /**
   * Set data URL encoding for `asset/inline`.
   *
   * @param {Object} module
   * @param {'base64' | false} encoding
   * @param {boolean} hasInlineQuery
   * @param {Object | null} svgOptions
   */
  setAssetModuleEncoding(module, encoding, hasInlineQuery, svgOptions) {
    if (this.IS_WEBPACK_VERSION_LOWER_5_96_0) {
      // TODO: refactor into Exceptions
      throw new Error(`\nThe support for the \`?inline\` query for assets is available since Webpack >= 5.96.`);
    }

    let assetEncoding = encoding === 'base64' ? 'base64' : false;

    const moduleGraph = this.compilation.moduleGraph;
    const moduleDataUrl = module.generator.dataUrlOptions;
    const moduleDataUrlType = typeof moduleDataUrl;
    const filename = module.generator.filename;
    const publicPath = module.generator.publicPath;
    const outputPath = module.generator.outputPath;
    const emit = module.generator.emit;
    const issuer = module.resourceResolveData?.context?.issuer;
    const isIssuerScript = this.pluginOption.isScript(issuer || '');
    let dataUrlOptions;

    if (moduleDataUrlType === 'function') {
      if (isIssuerScript) {
        dataUrlOptions = (...args) => {
          // extra processes SVG loaded in a JS file, because it will not be processed in renderManifest
          let resultDataUrl = moduleDataUrl(...args);
          let normalized = this.assetInline.normalizeDataUrlEncoding(resultDataUrl, svgOptions);

          // TODO: research why is called double (perhaps the JS file (issuer) is called double)
          // console.log(
          //   ' ====> INJECTION: ',
          //   { isIssuerScript, resource: module.resource, svgOptions, normalized },
          //   resultDataUrl,
          //   args
          // );

          return normalized.dataUrl;
        };
      } else {
        dataUrlOptions = moduleDataUrl;
      }
    } else {
      dataUrlOptions = moduleDataUrlType === 'object' ? { ...moduleDataUrl } : {};
      dataUrlOptions.encoding = assetEncoding;
    }

    module.generator = new AssetGenerator(moduleGraph, dataUrlOptions, filename, publicPath, outputPath, emit);
  }

  /**
   * Force set asset module type to `asset/inline`.
   *
   * @param {Object} module
   */
  setAssetModuleTypeInline(module) {
    module.type = ASSET_MODULE_TYPE_INLINE;
    module.parser = new AssetParser(true);
  }

  /**
   * Whether the module is imported CSSStyleSheet in JS.
   *
   * @param {{}} module
   * @return {boolean}
   */
  isCSSStyleSheet(module) {
    return (
      Array.isArray(module.loaders) &&
      module?.loaders.some(
        (loader) => loader.loader.includes('css-loader') && loader.options?.exportType === 'css-style-sheet'
      )
    );
  }

  /**
   * Returns unique style loaders only.
   *
   * If a style file is imported in *.vue file then:
   *  - remove the needles vue loader
   *  - remove double loaders, occurs when using the lang="scss" attribute, e.g.: <style src="./style.scss" lang="scss">
   *
   * @param {Array<Object>} loaders The mishmash of loaders with duplicates.
   * @param {Array<Object> | []} parentLoaders The issuer loaders.
   * @return {Array<Object>} The style loaders.
   */
  filterStyleLoaders(loaders, parentLoaders) {
    const loaderRegExp = /([\\/]node_modules[\\/].+?[\\/])/;
    const parentLoaderNames = [];
    const uniqueStyleLoaders = new Map();

    for (let { loader } of parentLoaders) {
      let [loaderName] = loader.match(loaderRegExp);
      if (loaderName) parentLoaderNames.push(loaderName);
    }

    // ignore endpoint (first) loader used by the issuer, e.g., when a style is imported in *.vue file, ignore vue loader
    if (parentLoaderNames.find((name) => loaders[0].loader.includes(name))) {
      loaders.shift();
    }

    for (let item of loaders) {
      // skip duplicate loader
      if (uniqueStyleLoaders.has(item.loader)) continue;
      uniqueStyleLoaders.set(item.loader, item);
    }

    return [cssLoader, ...uniqueStyleLoaders.values()];
  }

  /**
   * Called after the `createModule` hook and before the `module` hook.
   *
   * @param {Object} createData
   * @param {Object} resolveData
   */
  beforeModule(createData, resolveData) {
    const { _bundlerPluginMeta: meta } = resolveData;
    const query = createData.resourceResolveData?.query || '';
    const isUrl = query.includes('url');

    // lazy load CSS in JS using `?url` query, see js-import-css-lazy-url
    if (meta.isImportedStyle && isUrl && !query.includes(cssLoaderName)) {
      const filename = this.pluginOption.getCss().filename;

      if (this.IS_WEBPACK_VERSION_LOWER_5_96_0) {
        // Webpack <= 5.95
        createData.generator = new AssetGenerator(undefined, filename);
      } else {
        // Webpack >= 5.96
        const moduleGraph = this.compilation.moduleGraph;
        const dataUrlOptions = undefined;
        const publicPath = undefined;
        const outputPath = undefined;
        const emit = true;

        createData.generator = new AssetGenerator(moduleGraph, dataUrlOptions, filename, publicPath, outputPath, emit);
      }

      createData.parser = new AssetParser(false);
      createData.type = ASSET_MODULE_TYPE_RESOURCE;
    }
  }

  /**
   * Called after a module instance is created.
   *
   * @param {NormalModule} module The Webpack module.
   * @param {Object} createData
   * @param {Object} resolveData
   */
  afterCreateModule(module, createData, resolveData) {
    const { _bundlerPluginMeta: meta } = resolveData;
    const { rawRequest, resource } = createData;

    this.assetEntry.connectEntryAndModule(module, resolveData);

    // skip the module loaded via importModule
    if (meta.isLoaderImport || meta.isParentLoaderImport) return;

    const { type, loaders } = module;
    const { issuer } = resolveData.contextInfo;

    // add missed scripts to compilation after deserialization
    if (meta.isTemplate) {
      if (this.collection.isDeserialized()) {
        this.collection.addToCompilationDeserializedFiles(resource);
      }
      return;
    }

    if (!issuer || this.assetInline.isDataUrl(rawRequest)) return;

    const isAssetModule = [
      ASSET_MODULE_TYPE,
      ASSET_MODULE_TYPE_INLINE,
      ASSET_MODULE_TYPE_RESOURCE,
      ASSET_MODULE_TYPE_SOURCE,
    ].includes(type);

    const isSvgFile = this.assetInline.isSvgFile(resource);
    const isInlineSvg = isSvgFile && this.pluginOption.getInlineSvgOptions(resource, module).inline;

    if (
      type === ASSET_MODULE_TYPE ||
      type === ASSET_MODULE_TYPE_INLINE ||
      (type === ASSET_MODULE_TYPE_SOURCE && isSvgFile) ||
      (isAssetModule && isSvgFile && isInlineSvg)
    ) {
      this.assetInline.add(resource, issuer, this.pluginOption.isEntry(issuer));
    }

    if (meta.isDependencyUrl && meta.isScript) return;

    // add resolved sources in use cases:
    // - if used url() in SCSS for source assets
    // - if used import url() in CSS, like `@import url('./styles.css');`
    // - if used webpack context
    if (meta.isDependencyUrl || loaders.length > 0 || type === ASSET_MODULE_TYPE_RESOURCE) {
      this.resolver.addSourceFile(resource, rawRequest, issuer);
    }
  }

  /**
   * Called before a module build has started.
   * Use this method to modify the module.
   *
   * @param {{}} module The extended Webpack module.
   */
  beforeBuildModule(module) {
    // do nothing, reserved for debugging
  }

  /**
   * Called after the build module but right before the execution of a loader.
   *
   * @param {Object} loaderContext The Webpack loader context.
   * @param {Object} module The extended Webpack module.
   */
  beforeLoader(loaderContext, module) {
    const { isTemplate, isLoaderImport } = module.resourceResolveData._bundlerPluginMeta;

    // skip the module loaded via importModule
    if (isLoaderImport) return;

    if (isTemplate) {
      const entryId = this.assetEntry.getEntryId(module);
      const entry = this.assetEntry.getById(entryId);

      if (entry.isTemplate && entry.resource === module.resource) {
        this.beforeProcessTemplate(entryId);
      }

      loaderContext.entryId = entryId;
      loaderContext.entryName = entry.originalName;
      loaderContext.entryData = this.assetEntry.getData(entryId);
    }
  }

  /**
   * Called after a module has been built successfully, after loader processing.
   *
   * Note: when the `cache.type` option is set to 'filesystem', then by 2nd `npm start` this hook will not be called.
   *
   * @param {Object} module The Webpack module.
   */
  afterBuildModule(module) {}

  /**
   * @param {Array<Object>} result
   * @param {Object} chunk
   * @param {Object} chunkGraph
   * @param {Object} outputOptions
   * @param {Object} codeGenerationResults
   */
  renderManifest(result, { chunk, chunkGraph, codeGenerationResults }) {
    if (chunk instanceof HotUpdateChunk) return;

    const entry = this.assetEntry.getByChunk(chunk);

    // process only entries supported by this plugin
    if (!entry || (!entry.isTemplate && !entry.isStyle)) return;

    const chunkModules = chunkGraph.getChunkModulesIterable(chunk);
    const assetModules = new Set();

    this.collection.addEntry(entry);

    // reserved solution
    // problem: if used `splitChunks.chunks` then, some assets may not found in chunkModules
    // solution: the `chunks` option must be defined in `splitChunks.cacheGroups.{cacheGroup}.chunks` only
    // see the test `resolve-image-in-multipages-splitChunks`
    // for (const [key, module] of this.compilation._modules.entries()) {
    //   if (key.startsWith(ASSET_MODULE_TYPE_RESOURCE)) {
    //     this.assetResource.saveData(module);
    //   }
    // }

    for (const module of chunkModules) {
      const { error, buildInfo, resource, resourceResolveData } = module;
      const { isScript, isImportedStyle, isCSSStyleSheet } = resourceResolveData?._bundlerPluginMeta || {};

      if (error) {
        // stop further processing of modules in webpack and display an error message
        return false;
      }

      if (
        isScript ||
        isImportedStyle ||
        isCSSStyleSheet ||
        !resource ||
        !resourceResolveData?.context ||
        this.assetInline.isDataUrl(resource)
      ) {
        // do nothing for scripts because webpack itself compiles and extracts JS files from scripts
        continue;
      }

      const contextIssuer = resourceResolveData.context.issuer;

      // note: the contextIssuer may be wrong, as previous entry, because Webpack distinct same modules by first access
      let issuer = contextIssuer === entry.sourceFile ? entry.resource : contextIssuer;
      if (!issuer || this.pluginOption.isEntry(issuer)) {
        issuer = entry.resource;
      }

      let moduleType = module.type;
      // decide an asset type by webpack option parser.dataUrlCondition.maxSize
      if (moduleType === ASSET_MODULE_TYPE) {
        moduleType = buildInfo.dataUrl === true ? ASSET_MODULE_TYPE_INLINE : ASSET_MODULE_TYPE_RESOURCE;
      }

      // TODO: refactor
      let svgOptions = this.assetInline.isSvgFile(resource)
        ? this.pluginOption.getInlineSvgOptions(resource, module)
        : null;

      if (svgOptions?.inline) {
        this.assetInline.saveData(entry, chunk, module, codeGenerationResults, moduleType, svgOptions);
      } else {
        switch (moduleType) {
          case JAVASCRIPT_MODULE_TYPE_AUTO:
            const assetModule = this.createAssetModule(entry, chunk, module);

            if (assetModule == null) continue;
            if (assetModule === false) return;

            assetModules.add(assetModule);
            break;
          case ASSET_MODULE_TYPE_RESOURCE:
            // resource required in the template or in the CSS via url()
            this.assetResource.saveData(module);
            break;
          case ASSET_MODULE_TYPE_INLINE:
            this.assetInline.saveData(entry, chunk, module, codeGenerationResults, moduleType);
            break;
          case ASSET_MODULE_TYPE_SOURCE:
            // support the source type for SVG only
            if (this.assetInline.isSvgFile(resource)) {
              this.assetInline.saveData(entry, chunk, module, codeGenerationResults, moduleType);
            }
            break;
          default:
          // do nothing
        }
      }
    }

    // 1. render entries and styles specified in HTML
    for (const module of assetModules) {
      const { fileManifest } = module;

      let content = this.renderModule(module);

      if (content == null) continue;

      if (typeof content === 'string') content = new RawSource(content);

      fileManifest.render = () => content;
      fileManifest.filename = module.assetFile;
      result.push(fileManifest);
    }

    // 2. renders styles imported in JavaScript
    if (!this.option.isCssHot() && this.collection.hasImportedStyle(this.currentEntryPoint?.id)) {
      this.renderImportStyles(result, { chunk });
    }
  }

  /**
   * Called in PROCESS_ASSETS_STAGE_OPTIMIZE_SIZE stage.
   *
   * @param {CompilationAssets} assets
   */
  processAssetsOptimizeSize(assets) {
    if (!this.pluginOption.isExtractComments()) {
      this.assetTrash.removeComments();
    }
  }

  /**
   * Called after render module's sources, after all optimizations.
   *
   * @param {CompilationAssets} assets
   */
  processAssetsFinalAsync(assets) {
    if (PluginError.size > 0) {
      // when the previous compilation hook has an error, then skip this hook
      return Promise.resolve();
    }

    return this.collection
      .render(assets)
      .then(() => {
        // remove all unused assets from compilation
        this.assetTrash.clearCompilation();
      })
      .catch((error) => {
        // this hook doesn't provide testable exceptions, therefore, save an exception to throw it in the done hook
        this.exceptions.add(error);
      });
  }

  /**
   * @param {AssetEntryOptions} entry The entry point of the chunk.
   * @param {Chunk} chunk The chunk of an asset.
   * @param {Module} module The module of the chunk.
   * @return {Object|null|boolean} assetModule Returns the asset module object.
   *   If returns undefined, then skip processing of the module.
   *   If returns null, then break the hook processing to show the original error, occurs by an inner error.
   */
  createAssetModule(entry, chunk, module) {
    const { compilation } = this;
    const { buildInfo, resource } = module;
    const [sourceFile] = resource.split('?', 1);
    const source = module.originalSource();

    // break process if occurs an error in module builder
    if (source == null) return false;

    // note: the `id` is
    // - in production mode as a number
    // - in development mode as a relative path
    const moduleId = compilation.chunkGraph.getModuleId(module);
    const assetModule = {
      // resourceInfo
      outputPath: undefined,
      filename: undefined,
      // renderContent arguments
      type: undefined,
      inline: false,
      source,
      sourceFile,
      resource,
      assetFile: undefined,
      fileManifest: {
        identifier: undefined,
        hash: undefined,
      },
    };

    if (sourceFile === entry.sourceFile) {
      const assetFile = entry.filename;

      // note: the entry can be not a template file, e.g., a style or script defined directly in entry
      if (entry.isTemplate) {
        this.currentEntryPoint = entry;
        assetModule.type = Collection.type.template;

        // save the template request with the query, because it can be resolved with different output paths:
        // - 'index':    './index.ext'         => dist/index.html
        // - 'index/de': './index.ext?lang=de' => dist/de/index.html
        this.asset.add(resource, assetFile);
      } else if (this.pluginOption.isStyle(sourceFile)) {
        assetModule.type = Collection.type.style;
      } else {
        // skip an unsupported entry type
        return;
      }

      assetModule.name = entry.originalName;
      assetModule.outputPath = entry.outputPath;
      assetModule.filename = entry.filenameTemplate;
      assetModule.assetFile = assetFile;
      assetModule.fileManifest.identifier = `${pluginName}.${chunk.id}`;
      assetModule.fileManifest.hash = chunk.contentHash['javascript'];

      return assetModule;
    }

    // fix #88: when used js dynamic import with magic comments /* webpackPrefetch: true */ and css.inline=true
    if (!this.currentEntryPoint && entry.isTemplate) {
      this.currentEntryPoint = entry;
    }

    // extract CSS
    const cssOptions = this.pluginOption.getStyleOptions(sourceFile);
    if (cssOptions == null) {
      // ignore file if css option is disabled
      return;
    }

    const inline = this.pluginOption.isInlineCss(resource, this.currentEntryPoint);
    const { name } = path.parse(sourceFile);
    const hash = buildInfo.assetInfo?.contenthash || buildInfo.hash;
    const { isCached, filename } = this.getStyleAsseFile({
      name,
      chunkId: chunk.id,
      hash,
      resource: sourceFile,
    });
    const assetFile = inline ? this.getInlineStyleAsseFile(filename, this.currentEntryPoint.filename) : filename;
    const data = {
      type: Collection.type.style,
      inline,
      resource,
      assetFile,
    };

    this.collection.setData(this.currentEntryPoint, null, data);
    this.resolver.addAsset({ resource, filename: assetFile });

    // skip already processed styles except inlined
    if (isCached && !inline) {
      return;
    }

    assetModule.type = Collection.type.style;
    assetModule.inline = inline;
    assetModule.outputPath = cssOptions.outputPath;
    assetModule.filename = cssOptions.filename;
    assetModule.assetFile = assetFile;
    assetModule.fileManifest.identifier = `${pluginName}.${chunk.id}.${moduleId}`;
    assetModule.fileManifest.hash = hash;

    return assetModule;
  }

  /**
   * Render styles imported in JavaScript.
   *
   * TODO: preload for images from imported styles
   *
   * @param {Array<Object>} result
   * @param {Object} chunk
   */
  renderImportStyles(result, { chunk }) {
    const { createHash } = this.webpack.util;
    const isAutoPublicPath = this.pluginOption.isAutoPublicPath();
    const publicPath = this.pluginOption.getPublicPath();
    const esModule = this.collection.isImportStyleEsModule();
    const urlRegex = new RegExp(`${esModule ? baseUri : ''}${urlPathPrefix}(.+?)(?=\\))`, 'g');
    const entry = this.currentEntryPoint;
    const entryFilename = entry.filename;
    const orderedRootIssuers = this.collection.orderedResources.get(entry.id);

    for (const issuer of orderedRootIssuers) {
      // Fix #68: if the same `c.css` file was imported in many js files: `a.js` and `b.js`,
      // then webpack processes the css module only for 1st `a.js`, others issuers will be ignored,
      // then we lost relation: a.js -> c.css (ok) but b.js -> c.css (lost).
      // So we can't use the following check for avoid unnecessary searching in js files where no CSS has been imported
      // Side-effect: increases build time for cases when many js files do not import css.
      // TODO: create a cache for js files that don't import CSS.
      // if (!this.collection.importStyleRootIssuers.has(issuer)) {
      //   console.log('--- importStyleRootIssuers: ', {
      //     entryFilename,
      //     issuer,
      //     importStyleRootIssuers: this.collection.importStyleRootIssuers,
      //   });
      //   continue;
      // }

      const issuerEntry = this.assetEntry.getByResource(issuer);
      const sources = [];
      const resources = [];
      const imports = [];
      const inlineSources = [];
      const inlineResources = [];
      const inlineImports = [];
      let cssHash = '';

      // 1. get styles from all nested files imported in the root JS file and sort them
      const modules = this.collection.findImportedModules(entry.id, issuer, chunk);

      // 2. squash styles from all nested files and group by inline/file type
      const uniqueModuleIds = new Set();
      for (const { module } of modules) {
        if (uniqueModuleIds.has(module.debugId)) {
          continue;
        }

        const urlQuery = module.resourceResolveData?.query || '';
        const isUrl = urlQuery.includes('url');
        const isInline = this.pluginOption.isInlineCss(urlQuery, entry);
        const importData = {
          resource: module.resource,
          assets: [],
        };

        // note: webpack self replaces inlined images in imported style, do nothing for it
        const { assetsInfo } = module.buildInfo;

        if (assetsInfo) {
          for (const [assetFile, asset] of assetsInfo) {
            const sourceFilename = asset.sourceFilename;
            const stylePath = path.dirname(module.resource);

            const data = {
              type: Collection.type.resource,
              inline: isInline,
              resource: path.resolve(stylePath, sourceFilename),
              assetFile: assetFile,
              issuer: {
                resource: module.resource,
              },
            };

            importData.assets.push(data);
          }
        }

        if (isUrl) {
          // get url of css output filename in js for the lazy load
          this.collection.setData(
            entry,
            { resource: issuer },
            {
              type: Collection.type.style,
              // lazy file can't be inlined, it makes no sense
              inline: false,
              lazyUrl: true,
              resource: module.resource,
              assetFile: module.buildInfo.filename,
            }
          );
          continue;
        }

        cssHash += module.buildInfo.hash;
        uniqueModuleIds.add(module.debugId);

        if (isInline) {
          inlineSources.push(...module._cssSource);
          inlineResources.push(module.resource);
          inlineImports.push(importData);
        } else {
          sources.push(...module._cssSource);
          resources.push(module.resource);
          imports.push(importData);
        }
      }

      if (sources.length === 0 && inlineSources.length === 0) continue;

      // 3. generate output filename

      // mixin importStyleIdx into hash to generate new hash after changes
      cssHash += this.collection.importStyleIdx++;

      const hash = createHash('md4').update(cssHash).digest('hex');
      const { isCached, filename } = this.getStyleAsseFile({
        name: issuerEntry.name,
        chunkId: chunk.id,
        hash,
        resource: issuer,
        useChunkFilename: true,
      });

      // CSS injected into HTML
      if (inlineSources.length) {
        const assetFile = this.getInlineStyleAsseFile(filename, entryFilename);
        const outputFilename = assetFile;

        this.collection.setData(
          entry,
          { resource: issuer },
          {
            type: Collection.type.style,
            inline: true,
            imported: true,
            // if style is imported then resource is the array of imported source files
            resource: inlineResources,
            assetFile: outputFilename,
            imports: inlineImports,
          }
        );

        // 4. extracts CSS content from squashed sources
        const issuerFilename = entryFilename;

        const resolveAssetFile = (match, file) =>
          isAutoPublicPath
            ? this.pluginOption.getOutputFilename(file, issuerFilename)
            : path.posix.join(publicPath, file);

        const cssContent = this.cssExtractModule.apply(inlineSources, (content) =>
          content.replace(urlRegex, resolveAssetFile)
        );

        // 5. add extracted CSS file into compilation
        const fileManifest = {
          render: () => cssContent,
          filename: assetFile,
          identifier: `${pluginName}.${chunk.id}.inline.css`,
          // the validity of the hash does not matter because it will be injected in the HTML
          hash: hash + 'inline',
        };

        result.push(fileManifest);
      }

      // CSS saved into file
      if (sources.length) {
        const assetFile = filename;
        const outputFilename = this.pluginOption.getOutputFilename(assetFile, entryFilename);

        this.collection.setData(
          entry,
          { resource: issuer },
          {
            type: Collection.type.style,
            inline: false,
            imported: true,
            // if style is imported then resource is the array of imported source files
            resource: resources,
            assetFile: outputFilename,
            imports,
          }
        );

        if (!isCached) {
          // 4. extracts CSS content from squashed sources
          const issuerFilename = assetFile;

          const resolveAssetFile = (match, file) =>
            isAutoPublicPath
              ? this.pluginOption.getOutputFilename(file, issuerFilename)
              : path.posix.join(publicPath, file);

          const cssContent = this.cssExtractModule.apply(sources, (content) =>
            content.replace(urlRegex, resolveAssetFile)
          );

          // 5. add extracted CSS file into compilation
          const fileManifest = {
            render: () => cssContent,
            filename: assetFile,
            identifier: `${pluginName}.${chunk.id}.file.css`,
            hash,
          };

          result.push(fileManifest);
        }
      }
    }
  }

  /**
   * Get a unique output CSS filename relative to the output path.
   *
   * @param {string} name
   * @param {string} chunkId
   * @param {string} hash
   * @param {string} resource
   * @param {boolean} useChunkFilename
   * @return {{isCached: boolean, filename: string}}
   */
  getStyleAsseFile({ name, chunkId, hash, resource, useChunkFilename = false }) {
    const { compilation } = this;
    const cssOptions = this.pluginOption.getCss();
    const filenameTemplate = useChunkFilename ? cssOptions.chunkFilename : cssOptions.filename;

    /** @type {PathData} The data to generate an asset path by the filename template. */
    const pathData = {
      contentHash: hash,
      chunk: {
        chunkId,
        name,
        hash,
      },
      filename: resource,
    };

    const assetPath = compilation.getAssetPath(filenameTemplate, pathData);
    const outputFilename = this.pluginOption.resolveOutputFilename(assetPath, cssOptions.outputPath);
    const [sourceFile] = resource.split('?', 1);

    // avoid the conflict: multiple chunks emit assets to the same filename
    // this occurs when filename template not contains a hash subsituation,
    // then the output name of css and its issuer is the same
    return this.asset.getUniqueFilename(sourceFile, outputFilename);
  }

  /**
   * Get temporary unique output filename for inline css.
   *
   * The same compiled CSS file must have a unique output filename by the entry.
   * After inlining of the compiled asset, this temporary file will be removed from compilation,
   * to avoid creating needles files.
   *
   * @param {string} assetFile
   * @param {string} issuerFile
   * @returns {string}
   */
  getInlineStyleAsseFile(assetFile, issuerFile) {
    return `${issuerFile}_${assetFile}`.replace(/\//g, '-');
  }

  /**
   * Render the module source code generated by a loader.
   *
   * @param {string} type The type of module, one of the values: template, style.
   * @param {RawSource} source The Webpack source.
   * @param {string} resource The full path of source file, including a query.
   * @param {string} sourceFile The full path of source file w/o a query.
   * @param {string} assetFile
   * @return {string|null} Return rendered HTML or null to not save the rendered content.
   */
  renderModule({ type, source, sourceFile, resource, assetFile }) {
    const loaderOptions = PluginService.getLoaderOptions(this.compilation.compiler);
    /** @type  FileInfo */
    const issuer = {
      resource,
      filename: assetFile,
    };
    const isStyle = type === 'style';

    this.resolver.setContext(this.currentEntryPoint, issuer);

    const vmScript = new VMScript({
      require: this.resolver.require,
      // required for `css-loader`
      module: { id: sourceFile },
      // required for ssr
      __filename: sourceFile,
    });

    // the css-loader defaults generate ESM code, which must be transformed into CommonJS to compile the code
    // the template loader generates CommonJS code, no need to transform
    const esModule = isStyle || loaderOptions.esModule === true;
    let result = vmScript.exec(source.source(), { filename: sourceFile, esModule });

    if (isStyle) {
      return this.cssExtractModule.apply(result);
    }

    return result;
  }

  /**
   * @param {number} entryId
   */
  beforeProcessTemplate(entryId) {
    this.collection.beforeProcessTemplate(entryId);
  }

  /**
   * @param {Compilation} compilation
   * @return {Promise<void>}
   */
  afterEmit(compilation) {
    const hooks = AssetCompiler.getHooks(compilation);
    /** @type {CompileEntries} */
    const entries = [];
    const promise = Promise.resolve();

    if (this.pluginOption.isIntegrityEnabled()) {
      promise.then(() => {
        const hashes = Integrity.getAssetHashes(compilation);
        return hooks.integrityHashes.promise(hashes);
      });
    }

    promise
      .then(() => {
        // prepare the CompileEntries for the hook
        for (const [, { entry, assets }] of this.collection.data) {
          /** @type {CompileEntry} */
          const compileEntry = {
            name: entry.originalName,
            assetFile: entry.filename,
            sourceFile: entry.sourceFile,
            resource: entry.resource,
            outputPath: entry.outputPath,
            assets,
          };
          entries.push(compileEntry);
        }

        return hooks.afterEmit.promise(entries);
      })
      .then(() => {
        if (this.pluginOption.hasAfterEmit()) {
          return this.pluginOption.afterEmit(entries, compilation).catch((error) => {
            this.exceptions.add(afterEmitException(error));
          });
        }
      })
      .catch((error) => {
        this.exceptions.add(error);
      });

    this.promises.push(promise);

    return promise;
  }

  /**
   * Execute after compilation.
   * Reset initial settings and caches by webpack serve/watch, display verbose.
   *
   * @param {Object} stats
   * @return {Promise}
   * @async
   */
  done(stats) {
    const { compilation } = this;
    const pluginCompiler = compilation.compiler;

    if (PluginService.isWatchMode(pluginCompiler)) {
      const watchDirs = this.pluginOption.getRootSourcePaths();

      // initialize snapshot only once, after compilation
      if (!this.isSnapshotInitialized) {
        const pluginOptions = this.pluginOption.get();
        Snapshot.init({
          fs: this.fs,
          dir: watchDirs,
          includes: [pluginOptions.test, pluginOptions.js.test],
        });

        // create initial snapshot of watching files, before any changes
        Snapshot.create();

        this.isSnapshotInitialized = true;
      }

      // allow watching for changes (add/remove/rename) of linked/missing scripts for static entry too.
      if (this.pluginOption.isDynamicEntry()) {
        watchDirs.forEach((dir) => compilation.contextDependencies.add(dir));
      }
    }

    // do something on done in the promise
    return Promise.all(this.promises)
      .then(() => {
        // do nothing, it required to be the finally called
      })
      .catch((error) => {
        // do nothing, it required to be the finally called
      })
      .finally(() => {
        const hasError = compilation.errors.length > 0 || this.exceptions.size > 0;

        compilation.name = compilationName(compilation.name, hasError);

        // reserved for using `compiler.cache.hooks.shutdown.tapAsync` if used `filesystem` cache
        // let statsOutput = stats.toString(stats.compilation.options.stats);
        // if (statsOutput) {
        //   outToConsole(statsOutput);
        // }

        if (this.exceptions.size > 0) {
          this.cacheDataComplete = false;

          const messages = Array.from(this.exceptions)
            .map((error) => (error.stack ? error.stack : error.toString()))
            .reduce((previousValue, currentValue) => previousValue + currentValue, '');

          this.exceptions.clear();
          throw new Error(messages);
        }

        if (this.pluginOption.isVerbose()) verbose(pluginCompiler);

        this.cacheDataComplete = !hasError;

        this.asset.reset();
        this.assetEntry.reset();
        this.assetTrash.reset();
        this.collection.reset();
        this.resolver.reset();
      });
  }

  /**
   * Called when the compiler is closing or a watching compilation has stopped.
   */
  shutdown() {
    PluginService.shutdown(this.compilation?.compiler);
  }
}

module.exports = AssetCompiler;