code splitting with multiple entry

fnurrahmah125 · Nov 2, 2023 · 04bc74d · 04bc74d
1 parent 4eb1528
commit 04bc74d
Show file tree

Hide file tree

Showing 11 changed files with 18 additions and 7 deletions.
diff --git a/test-webpack/output/bundle.c84d4dda8a4df3a156cc.js b/test-webpack/output/bundle.c84d4dda8a4df3a156cc.js
diff --git a/test-webpack/output/index.html b/test-webpack/output/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>Belajar Webpack</title><script defer="defer" src="bundle.c84d4dda8a4df3a156cc.js"></script><link href="style.259cfe6f9f24f6511d67.css" rel="stylesheet"></head><body><img src="img/cat-d908827b839c650602c2.jpg" alt="image" class="cat-img"/><div class="row justify-content-center mt-5"><div class="col-4"><div class="card"><div class="card-header text-center"><h3>WPU Super App</h3></div><div class="card-body"><div class="alert alert-danger" role="alert" id="error">error!</div><h5 class="card-title">Kalkulator Sakti</h5><div class="input-group mb-3"><input class="form-control" placeholder="masukkan angka" id="operand1" autofocus required/> <span class="input-group-text">+</span> <input class="form-control" placeholder="masukkan angka" id="operand2" required/> <button class="btn btn-primary" type="button" id="tombol-tambah">Jumlahkan!</button></div><div class="card mt-3"><div class="card-body">Hasilnya adalah: <span id="hasil"></span></div></div></div><div class="card-footer text-center"><button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#jokesModal" id="jokes-receh">Jokes Receh!</button></div></div></div></div><div class="modal fade" id="jokesModal" tabindex="-1" aria-labelledby="jokesModalLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h5 class="modal-title" id="jokesModalLabel">Joke Hari Ini 🤣</h5><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div><div class="modal-body">...</div><div class="modal-footer"><button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button></div></div></div></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>Belajar Webpack</title><script defer="defer" src="main.e4b7653cf02e192897ed.js"></script><script defer="defer" src="vendor.7aa7351566afe8df91ac.js"></script><link href="style.259cfe6f9f24f6511d67.css" rel="stylesheet"></head><body><img src="img/cat-d908827b839c650602c2.jpg" alt="image" class="cat-img"/><div class="row justify-content-center mt-5"><div class="col-4"><div class="card"><div class="card-header text-center"><h3>WPU Super App</h3></div><div class="card-body"><div class="alert alert-danger" role="alert" id="error">error!</div><h5 class="card-title">Kalkulator Sakti</h5><div class="input-group mb-3"><input class="form-control" placeholder="masukkan angka" id="operand1" autofocus required/> <span class="input-group-text">+</span> <input class="form-control" placeholder="masukkan angka" id="operand2" required/> <button class="btn btn-primary" type="button" id="tombol-tambah">Jumlahkan!</button></div><div class="card mt-3"><div class="card-body">Hasilnya adalah: <span id="hasil"></span></div></div></div><div class="card-footer text-center"><button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#jokesModal" id="jokes-receh">Jokes Receh!</button></div></div></div></div><div class="modal fade" id="jokesModal" tabindex="-1" aria-labelledby="jokesModalLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h5 class="modal-title" id="jokesModalLabel">Joke Hari Ini 🤣</h5><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div><div class="modal-body">...</div><div class="modal-footer"><button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button></div></div></div></div></body></html>
diff --git a/test-webpack/output/main.e4b7653cf02e192897ed.js b/test-webpack/output/main.e4b7653cf02e192897ed.js
diff --git a/...undle.c84d4dda8a4df3a156cc.js.LICENSE.txt → .../main.e4b7653cf02e192897ed.js.LICENSE.txt b/...undle.c84d4dda8a4df3a156cc.js.LICENSE.txt → .../main.e4b7653cf02e192897ed.js.LICENSE.txt
diff --git a/test-webpack/output/vendor.7aa7351566afe8df91ac.js b/test-webpack/output/vendor.7aa7351566afe8df91ac.js
diff --git a/test-webpack/output/vendor.7aa7351566afe8df91ac.js.LICENSE.txt b/test-webpack/output/vendor.7aa7351566afe8df91ac.js.LICENSE.txt
@@ -0,0 +1,5 @@
+/*!
+  * Bootstrap v5.3.2 (https://getbootstrap.com/)
+  * Copyright 2011-2023 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
+  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+  */
diff --git a/test-webpack/src/index.js b/test-webpack/src/index.js
@@ -1,4 +1,4 @@
-import * as bootstrap from "bootstrap";
+require("./vendor");
 import css from "./style.scss";
 import { run } from "./app/app.js";
 import { AlertService } from "./app/services/alert.service.js";

diff --git a/test-webpack/src/vendor.js b/test-webpack/src/vendor.js
@@ -0,0 +1 @@
+import * as bootstrap from "bootstrap";
diff --git a/test-webpack/webpack.config.js b/test-webpack/webpack.config.js
@@ -3,7 +3,10 @@ const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const path = require("path");
 
 module.exports = {
-  entry: "./src/index.js",
+  entry: {
+    main: "./src/index.js",
+    vendor: "./src/vendor.js",
+  },
   plugins: [
     new HtmlWebpackPlugin({
       template: "./src/template.html",

diff --git a/test-webpack/webpack.dev.js b/test-webpack/webpack.dev.js
@@ -15,7 +15,7 @@ module.exports = merge(config, {
   },
   output: {
     path: path.resolve(__dirname, "output"),
-    filename: "bundle.js",
+    filename: "[name].js",
     assetModuleFilename: "img/[name][ext]",
     clean: true,
   },

diff --git a/test-webpack/webpack.prod.js b/test-webpack/webpack.prod.js
@@ -7,7 +7,7 @@ module.exports = merge(config, {
   mode: "production",
   output: {
     path: path.resolve(__dirname, "output"),
-    filename: "bundle.[contenthash].js",
+    filename: "[name].[contenthash].js",
     assetModuleFilename: "img/[name]-[hash][ext]",
     clean: true,
   },