Pada artikel ini, saya ingin berbagi pengalaman saya dalam memisahkan bundel untuk situs web multi-halaman menggunakan Webpack 4. Pertama, buat titik masuk untuk setiap halaman. Pertimbangkan 4 halaman sebagai contoh:
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`, } }
Selama perakitan, sebuah bundel akan dibuat untuk setiap halaman. Pada titik masuk common , saya mengeluarkan skrip umum untuk semua halaman. Untuk menghubungkan bundel kami ke halaman, kami menggunakan plugin Webpack HtmlWebpackPlugin .
Pertimbangkan sebuah contoh:
module.exports = { ... plugins: [ new HtmlWebpackPlugin({ filename: `${PATHS.dist}/index.html`, template: `${PATHS.dist}/index.html`, chunks: ["index", "common"] }) ... ] ... };
Dalam chunks menentukan bundel yang diperlukan untuk halaman ini (urutan: dari kanan ke kiri). Dengan demikian, skrip pertama akan terhubung ke halaman, dan kemudian skrip diperlukan secara terpisah untuk halaman ini.
Jika kami memiliki modul umum / pustaka pihak ketiga yang terhubung pada halaman yang berbeda, kami akan membuat bundel umum untuk halaman ini.
Kami akan menggunakan plugin Webpack SplitChunksPlugin . Sebenarnya, ini adalah konfigurasinya:
module.exports = { optimization: { splitChunks: { chunks: "all", minSize: 1, minChunks: 2 } } }
Setelah perakitan, kami akan menerima bundel secara terpisah untuk setiap halaman dan bundel yang membagikan halaman kami.
index.js contacts.js common.js about.js vendors~about-us~index.js vendors~about-us~contacts.js
Bundel vendor ~ about-us ~ index.js akan berisi skrip umum untuk about-us dan index , yang di-cache oleh browser, dan ketika Anda beralih dari halaman index ke about mereka akan diunduh oleh browser dan Anda hanya perlu mengunduh bundel about.js .
Nama chunk dapat diubah dalam konfigurasi plugin ini.
Untuk menghubungkan bundel ini dengan benar ke setiap halaman kami, kami akan menggunakan HtmlWebpackPlugin. Konfigurasi sama dengan di awal artikel. Hanya sekarang Anda harus meletakkan versi alpha dari plugin ini, karena pada saat penulisan, plugin ini tidak menghubungkan potongan kami yang terpisah, tetapi hanya menghubungkan titik masuk.
npm i --save-dev html-webpack-plugin@next
Setelah perakitan, kami mendapatkan kode berikut di index.html:
<script src="js/common.js"></script> <script src="js/vendors~about-us~index.js"></script> <script src="js/index.js"></script>