javascript - Como Encontrar os Chunks para uma Entrada do Webpack

Estou a usar o webpack para modernizar uma aplicação ASP.NET Web Forms de múltiplas páginas legada. Tenho tido bastante sucesso com isso até tentar usar o SplitChunksPlugin para eliminar duplicações nos meus bundles usando a sua opção chunks: 'all'. Infelizmente, isto cria alguns bundles de JS extra que precisam todos de ser incluídos em tags script juntamente com o bundle de entrada original. Sem surpresa, o documento ligado acima refere exatamente isso:

Por defeito, [o plugin] apenas afeta os blocos on-demand, porque alterar os blocos iniciais afetaria as tags de script que o ficheiro HTML deveria incluir para executar o projeto.

Mas eu gostaria muito de ter esses blocos de entrada iniciais separados, por isso estou a tentar encontrar uma forma de incluir todos esses blocos extra em tags de script. Parece que o conselho padrão aqui é usar o HtmlWebpackPlugin para gerar uma página HTML com todas as tags de script incluídas, mas isto não funciona para mim (pelo menos na sua configuração padrão) por pelo menos duas razões:

1. Este é um projeto Web Forms. Não se pode simplesmente mexer em ficheiros aspx.
2. Mesmo que eu encontrasse uma forma de gerar alguns ficheiros aspx válidos cada vez que executasse o webpack (suponho que isso seja possível, mas aqui está a dificuldade principal); parece que o HtmlWebpackPlugin apenas gera tags de script para todos os chunks, ou para um subconjunto selecionado manualmente deles (usando a opção chunks: []).

Para elaborar sobre esse segundo ponto e chegar à minha pergunta -- eu poderia fazer alguma análise manual dos fragmentos divididos para construir um gráfico de dependências e incluir manualmente cada um no aspx, mas isso obviamente não é uma abordagem sustentável. Eu estava a esperar que o HtmlWebpackPlugin pudesse oferecer alguma forma de pelo menos indicar que este fragmento é, em última análise, utilizado por esta entrada, ou que esta entrada utiliza estes fragmentos, etc., mas não encontrei quaisquer relações desse tipo presentes na sua saída.

Existe alguma maneira, sem passar por soluções complicadas, de determinar automaticamente quais dos fragmentos divididos são dependências de um determinado fragmento de entrada?

Resposta #1

Instale este plugin com a opção no seu ficheiro de configuração do webpack:

npm install webpack-manifest-plugin --save-dev

// webpack.config.js

const ManifestPlugin = require('webpack-manifest-plugin')

concatMerge(configuration, {
  // ...
  plugins: [
    new ManifestPlugin({
      fileName: 'prod.manifest.json',
      generate: (seed, files) => {
        const entrypoints = new Set()
        files.forEach(
          (file) => ((file.chunk || {})._groups || []).forEach(
            (group) => entrypoints.add(group)
          )
        )
        const entries = [...entrypoints]
        const entryArrayManifest = entries.reduce((acc, entry) => {
          const name = (entry.options || {}).name
            || (entry.runtimeChunk || {}).name
          const files = [].concat(
            ...(entry.chunks || []).map((chunk) => chunk.files)
          ).filter(Boolean)
          return name ? {...acc, [name]: files} : acc
        }, seed)
        return entryArrayManifest
      }
    }),
  ],
}

Ele irá gerar um prod.manifest.json contendo fragmentos para cada entrada ou rota:

{
  "entryOne": [
    "main.common.d7791ce7a1e7ba394.css",
    "main.common.d7791ce7a1e7ba394.js",
    "main.entryOne.eb614be915641d465.js"
  ],
  "a-route": [
    "main.common.d7791ce7a1e7ba394.css",
    "main.a-routes.14b91be915641d465.js"
  ]
  // ...
}

Resposta #2

Mais simplesmente, para o mesmo resultado que @Junior Tour, também pode usar o parâmetro entries da propriedade generate:

plugins: [
    new WebpackManifestPlugin(
    {
        fileName: 'prod.manifest.json',
        generate: (seed, files, entries) => {
            return entries;
        }
    }),
],