javascript - Hur man hittar bitarna för en Webpack-entry

Jag använder webpack för att modernisera en äldre fler-sidig ASP.NET Web Forms-applikation. Jag har haft ganska bra framgång med det tills jag försökte använda SplitChunksPlugin för att ta bort dubblerade delar i mina bundles med dess chunks: 'all'-alternativ. Detta skapar tyvärr ett par extra JS-buntar som alla måste inkluderas i script-taggar tillsammans med den ursprungliga ingångsbunten. Inte överraskande anges detta i den ovan länkade dokumentationen:

Som standard påverkar [tillägget] endast on-demand-delar, eftersom att ändra initiala delar skulle påverka de script-taggar som HTML-filen bör inkludera för att köra projektet.

Men jag skulle väldigt gärna vilja ha de där initiala inmatningsbitarna uppdelade, så jag försöker hitta ett sätt att få med alla de där extra bitarna i skript-taggar. Det verkar som den vanliga rekommendationen här är att använda HtmlWebpackPlugin för att generera en HTML-sida med alla skript-taggar inkluderade, men detta fungerar inte för mig (åtminstone i dess standardkonfiguration) av minst två skäl:

1. Detta är ett Web Forms-projekt. Man får helt enkelt inte pilla med aspx-filer.
2. Även om jag faktiskt skulle hitta ett sätt att generera några giltiga aspx-filer varje gång jag körde webpack (jag antar att det är möjligt, men här är den största svårigheten); verkar det som att HtmlWebpackPlugin endast genererar skript-taggar för alla delarna, eller en manuellt vald delmängd av dem (genom att använda chunks: []-alternativet).

För att utveckla den andra punkten och komma till min fråga -- jag skulle kunna göra en manuell analys av de uppdelade delarna för att bygga ett beroendediagram och manuellt inkludera var och en i aspx, men det är uppenbarligen inte en hållbar metod. Jag hoppades att HtmlWebpackPlugin skulle kunna erbjuda något sätt att åtminstone indikera att denna del slutligen används av denna ingång, eller att denna ingång använder dessa delar, etc., men jag har inte hittat några sådana relationer i dess output.

Finns det något sätt, utan att gå genom hack-hinder, att automatiskt avgöra vilka av de delade bitarna som är beroenden till en given ingångsbit?

Svar #1

Installera detta plugin med alternativ i din webpack-konfiguration:

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
      }
    }),
  ],
}

Det kommer att generera en prod.manifest.json som innehåller chunks för varje entry eller rutter:

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

Svar #2

Enklare sagt, för samma resultat som @Junior Tour kan du också använda entries-parametern i generate-egenskapen:

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