javascript - Come Trovare i Chunks per un Entry di Webpack

Sto usando webpack per modernizzare una vecchia applicazione ASP.NET Web Forms a più pagine. Ho avuto abbastanza successo finché non ho provato a usare lo SplitChunksPlugin per eliminare i duplicati nei miei bundle usando la sua opzione chunks: 'all'. Purtroppo, questo crea una manciata di bundle JS extra che devono tutti essere inclusi nei tag script insieme al bundle di ingresso originale. Non sorprende, la documentazione linkata sopra lo afferma chiaramente:

Per impostazione predefinita, [il plugin] influisce solo sui chunk su richiesta, perché modificare i chunk iniziali influenzerebbe i tag script che il file HTML dovrebbe includere per eseguire il progetto.

Ma mi piacerebbe molto avere quei chunk di ingresso iniziali divisi, quindi sto cercando un modo per includere tutti quei chunk extra nei tag script. Sembra che il consiglio standard qui sia usare HtmlWebpackPlugin per generare una pagina HTML con tutti i tag script inclusi, ma questo non funziona per me (almeno nella sua configurazione predefinita) per almeno due motivi:

1. Questo è un progetto Web Forms. Non si può semplicemente manomettere i file aspx.
2. Anche se riuscissi a trovare un modo per generare alcuni file aspx validi ogni volta che eseguo webpack (suppongo sia fattibile, ma qui sta la difficoltà principale); sembra che HtmlWebpackPlugin generi solo tag script per tutti i chunk, o per un sottoinsieme selezionato manualmente di essi (usando l'opzione chunks: []).

Per elaborare su quel secondo punto e arrivare alla mia domanda -- potrei fare un'analisi manuale dei pezzi divisi per costruire un grafo delle dipendenze e includere manualmente ciascuno di essi nell'aspx, ma ovviamente non è un approccio sostenibile. Speravo che HtmlWebpackPlugin potesse offrire qualche modo per indicare almeno che questo pezzo è infine utilizzato da questo entry, o che questo entry utilizza questi pezzi, ecc., ma non ho trovato alcuna di queste relazioni presente nel suo output.

Esiste un modo, senza passare attraverso procedure complicate, per determinare automaticamente quali dei chunk divisi sono dipendenze di un determinato chunk di ingresso?

Risposta n. 1

Installa questo plugin con l'opzione nel tuo file di configurazione di 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
      }
    }),
  ],
}

Genererà un prod.manifest.json contenente chunk per ogni entry o route:

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

Risposta n. 2

Più semplicemente, per lo stesso risultato di @Junior Tour puoi anche usare il parametro entries della proprietà generate:

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