javascript - Kuinka löytää palaset Webpack-syötteelle

Käytän webpackia modernisoidakseni vanhaa monisivuisen ASP.NET Web Forms -sovelluksen. Minulla on ollut melko hyvää menestystä siinä, kunnes yritin käyttää SplitChunksPluginia poistaakseni päällekkäisyyksiä pakkauksistani sen chunks: 'all' -asetuksen avulla. Valitettavasti tämä luo joukon ylimääräisiä JS-paketteja, jotka kaikki täytyy sisällyttää script-tageihin alkuperäisen sisääntulopaketin lisäksi. Ei ole yllätys, että yllä linkitetyssä dokumentaatiossa todetaan sama asia:

Oletusarvoisesti [laajennus] vaikuttaa vain pyydettäviin kokonaisuuksiin, koska alkuperäisten kokonaisuuksien muuttaminen vaikuttaisi HTML-tiedoston sisältämiin skriptitunnisteisiin projektin suorittamiseksi.

Mutta haluaisin kovasti, että nuo alkuperäiset sisäänmenokappaleet jaettaisiin, joten yritän löytää tavan saada kaikki ne ylimääräiset kappaleet mukaan skriptitagien sisälle. Näyttää siltä, että tavanomainen neuvo täällä on käyttää HtmlWebpackPluginia HTML-sivun luomiseen, jossa kaikki skriptitagit ovat mukana, mutta tämä ei toimi minulle (vähintään sen oletusasetuksilla) ainakin kahdesta syystä:

1. Tämä on Web Forms -projekti. Yksinkertaisesti ei vain sotketa aspx-tiedostoja.
2. Vaikka löytäisinkin tavan luoda joitakin kelvollisia aspx-tiedostoja joka kerta kun suoritan webpakin (oletan, että se on mahdollista, mutta tässä on pääasiallinen vaikeus); näyttää siltä, että HtmlWebpackPlugin luo skriptitunnisteet vain kaikille kohteille tai manuaalisesti valitulle alijoukolle niistä (käyttäen chunks: [] -vaihtoehtoa).

Selventääkseni tuota toista kohtaa ja päästäkseni kysymykseeni -- voisin tehdä manuaalista analyysiä jaetuille osille rakentaakseni riippuvuuskartan ja sisällyttääkseni jokaisen niistä manuaalisesti aspx-tiedostoon, mutta se ei tietenkään ole ylläpidettävä lähestymistapa. Toivoin, että HtmlWebpackPlugin voisi tarjota jonkinlaisen tavan ainakin ilmaista, että tämä osa käytetään lopulta tässä entryssä, tai että tämä entry käyttää näitä osia jne., mutta en ole löytänyt tällaisia suhteita sen tuotoksessa.

Onko mitään tapaa, ilman että joutuu menemään hakkerointirenkaiden läpi, automaattisesti määrittää, mitkä jaetuista paloista ovat riippuvuuksia tietylle lähtöpaloille?

Vastaus #1

Asenna tämä laajennus vaihtoehdon kanssa webpack-konfiguraatioosi:

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

Se luo prod.manifest.json-tiedoston, joka sisältää osia jokaiselle kohteelle tai reitille:

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

Vastaus #2

Yksinkertaisemmin, samaan tulokseen kuin @Junior Tourissa voit myös käyttää generate-ominaisuuden entries-parametria:

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