File path info in chunkFilename function when optimization.chunkIds is deterministic

Feature request

What is the expected behavior? I am using the output.chunkFilename function to generate friendly readable chunk filenames based on their source path. This works well if optimization.chunkIds is set to named. However, this leaves big long ids in the source code references (e.g. “src_web_app_components_home_index_js”). Ideally, I’d like to leave optimization.chunkIds set to deterministic (the default in a production build), so the chunk ids are small numbers. The issue is that the chunk info provided to the chunkFilename function no longer has any identifiable information about the file paths to generate the filenames anymore.

What is motivation or use case for adding/changing the behavior? Automatic readable filenames with smaller code.

How should this be implemented in your opinion? Include more information to the chunkFilename regardless of the optimization.chunkIds setting.

Are you willing to work on this yourself? yes

[gpoitch]

@jamesarosen This was my final solution. You’ll have to adjust it for your directory structure but you should have all the pieces there.

class AutoChunkNamePlugin {
  apply(compiler) {
    compiler.hooks.compilation.tap('AutoChunkNamePlugin', (compilation) => {
      compilation.hooks.chunkIds.tap('AutoChunkNamePlugin', (chunks) => {
        chunks.forEach((chunk) => {
          if (!chunk.name) {
            const chunkModule = compilation.chunkGraph.getChunkRootModules(chunk)[0]
            const rootModule = (chunkModule && chunkModule.rootModule) || chunkModule
            const rootPath = rootModule && rootModule.userRequest
            const name = rootPath && rootPath.split(path.sep).slice(-2)[0]
            if (name) chunk.name = name
          }
        })
      })
    })
  }
}

[gpoitch]

I’m having some success simply applying both plugins. Not sure of any unintended side-effects yet:

const { DeterministicChunkIdsPlugin, NamedChunkIdsPlugin } = require('webpack').ids

class NamedDeterministicChunkIdsPlugin {
  apply(compiler) {
    // Apply named chunks plugin (assigns name to chunk.id)
    new NamedChunkIdsPlugin().apply(compiler)

    compiler.hooks.compilation.tap('NamedDeterministicChunkIdsPlugin', (compilation) => {
      compilation.hooks.chunkIds.tap('NamedDeterministicChunkIdsPlugin', (chunks) => {
        chunks.forEach((chunk) => {
          chunk.name = chunk.id // Store the name on another field
          chunk.id = null // null out id so the next plugin will reassign it
        })
      })
    })

    // Apply deterministic chunks plugin (reassigns chunk.id to a short numeric id)
    new DeterministicChunkIdsPlugin().apply(compiler)
  }
}