In diesem Artikel möchte ich meine Erfahrungen beim Aufteilen von Bundles für eine mehrseitige Site mit Webpack 4 teilen. Erstellen Sie zunächst einen Einstiegspunkt für jede Seite. Betrachten Sie 4 Seiten als Beispiel:
const path = require("path"); const PATHS = { src: path.resolve(process.cwd(), "src"), dist: path.resolve(process.cwd(), "dist") }; module.exports = { entry: { common: `${PATHS.src}/js/common`, index: `${PATHS.src}/js/index`, contacts: `${PATHS.src}/js/contacts`, about: `${PATHS.src}/js/about`, } }
Während der Montage wird für jede Seite ein Bundle erstellt. Als common Einstiegspunkt habe ich gemeinsame Skripte für alle Seiten veröffentlicht. Um unsere Bundles mit Seiten zu verbinden, verwenden wir das Webpack-Plugin HtmlWebpackPlugin .
Betrachten Sie ein Beispiel:
module.exports = { ... plugins: [ new HtmlWebpackPlugin({ filename: `${PATHS.dist}/index.html`, template: `${PATHS.dist}/index.html`, chunks: ["index", "common"] }) ... ] ... };
In chunks die für diese Seite erforderlichen Bundles an (Reihenfolge: von rechts nach links). Somit werden zuerst die Skripte mit der Seite verbunden und dann die für diese Seite separat benötigten Skripte.
Wenn auf verschiedenen Seiten gemeinsame Module / Bibliotheken von Drittanbietern verbunden sind, erstellen wir gemeinsame Bundles für diese Seiten.
Wir werden das Webpack-Plugin SplitChunksPlugin verwenden . Eigentlich ist hier die Konfiguration:
module.exports = { optimization: { splitChunks: { chunks: "all", minSize: 1, minChunks: 2 } } }
Nach dem Zusammenbau erhalten wir Bundles für jede Seite und Bundles, die unsere Seiten gemeinsam nutzen, separat.
index.js contacts.js common.js about.js vendors~about-us~index.js vendors~about-us~contacts.js
Das Paket "about-us ~ index.js" des Anbieters enthält allgemeine Skripte für " about-us und " index , die vom Browser zwischengespeichert werden. Wenn Sie von der index zu " about wechseln about sie bereits vom Browser heruntergeladen, und Sie müssen nur das Bundle " about.js herunterladen.
Chunk-Namen können in der Konfiguration dieses Plugins geändert werden.
Um diese Bundles korrekt mit jeder unserer Seiten zu verbinden, verwenden wir HtmlWebpackPlugin. Die Konfiguration ist dieselbe wie am Anfang des Artikels. Erst jetzt müssen Sie die Alpha-Version dieses Plugins einfügen, da dieses Plugin zum Zeitpunkt des Schreibens nicht unsere getrennten Chunks verbunden hat, sondern nur verbundene Einstiegspunkte.
npm i --save-dev html-webpack-plugin@next
Nach dem Zusammenbau erhalten wir den folgenden Code in index.html:
<script src="js/common.js"></script> <script src="js/vendors~about-us~index.js"></script> <script src="js/index.js"></script>