Config dependency manager doesn't take into account all the hooks until "initialize".

Bug report

What is the current behavior? I use configuration dependencies to make sure that the plugins from the second config 'server' will always be executed after the first config 'client' output is emitted:

module.exports = [
  {
    name: 'client',
    plugins: [
      {
        apply: compiler => compiler.hooks.afterEmit.tap('Plugin1', _ => {
          console.log('Config 1: afterEmit')
        })
      }
    ]
  },
  {
    name: 'server',
    dependencies: ['client'],
    plugins: [
      {
        apply: compiler => compiler.hooks.afterResolvers.tap('Plugin2', _ => {
          // I picked the "afterResolvers" hook, because i will apply here the HtmlWebpackPlugin,
          // that is required to be applied before the "initialize" step.
          console.log('Config 2: afterResolvers')
        })
      }
    ]
  }
]

Doesn’t work in the right order for the hooks like afterResolvers (or initialize), as seen in the console output:

Config 2: afterResolvers
Config 1: afterEmit

However, this works as expected starting from the beforeRun hook:

Config 1: afterEmit
Config 2: beforeRun

What is the expected behavior?

Config 1: afterEmit
Config 2: afterResolvers

Other relevant information: webpack version: 5.74.0 Node.js version: 16.17.0 Operating System: Windows 10

[alexander-akait]

@reves I want to close the issue, because we can’t fix it here, HtmlWebpackPlugin should be rewritten without initialize hook and get entrypoint from compilation (not from configuration, so you code will work without workarounds)

[alexander-akait]

HtmlWebpackPlugin should not use compiler.hooks.initialize to get options, that is wrong and invalid, options can be changed in future too, so it should be rewritten to get options in the valid hooks, but here workaround:

const Plugin = require("html-webpack-plugin")

const compiler = [
  {
    name: 'client',
    output: {
      filename: "client-[name].js"
    },
    plugins: [
      {
        apply: compiler => compiler.hooks.afterEmit.tapAsync('Plugin1', (compilation, callback) => {
          console.log('Config 1: afterEmit')

          callback()
        })
      }
    ]
  },
  {
    name: 'server',
    dependencies: ['client'],
    output: {
      filename: "server-[name].js"
    },
    plugins: [
      {
        apply: compiler => compiler.hooks.beforeRun.tap('Plugin2', (compiler) => {
          new Plugin().apply(compiler);

          compiler.hooks.initialize.call(compiler);
        })
      }
    ]
  }
]

module.exports = compiler;

/cc @jantimon can we rewrite it, to get entries you can use this hook - https://github.com/webpack/webpack/blob/00c57ede11ee10dbb0a42e944b2cd7a038089944/lib/ProgressPlugin.js#L393, other things are just default options and small logic, you don’t need it to do inside hook and it is wrong