- install lodash and vanilla-tilt

- code splitting usign prevent duplication (jokesService is not working)
fnurrahmah125 · Nov 2, 2023 · b8ebdfb · b8ebdfb
1 parent 04bc74d
commit b8ebdfb
Show file tree

Hide file tree

Showing 18 changed files with 76 additions and 15 deletions.
diff --git a/test-webpack/output/242.c492344aa320d0f928e9.js b/test-webpack/output/242.c492344aa320d0f928e9.js
diff --git a/.../main.e4b7653cf02e192897ed.js.LICENSE.txt → ...t/242.c492344aa320d0f928e9.js.LICENSE.txt b/.../main.e4b7653cf02e192897ed.js.LICENSE.txt → ...t/242.c492344aa320d0f928e9.js.LICENSE.txt
diff --git a/test-webpack/output/hello.2a18999539550d47038f.js b/test-webpack/output/hello.2a18999539550d47038f.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="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>
+<!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.caaaf053892ab24b10e9.js"></script><script defer="defer" src="242.c492344aa320d0f928e9.js"></script><script defer="defer" src="vendor.c5d7e9c9df7760116072.js"></script><script defer="defer" src="hello.2a18999539550d47038f.js"></script><script defer="defer" src="shared.356e651d06d2a689e718.js"></script><link href="style.259cfe6f9f24f6511d67.css" rel="stylesheet"></head><body><img src="img/cat-d908827b839c650602c2.jpg" alt="image" class="cat-img" data-tilt/><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.caaaf053892ab24b10e9.js b/test-webpack/output/main.caaaf053892ab24b10e9.js
diff --git a/test-webpack/output/main.e4b7653cf02e192897ed.js b/test-webpack/output/main.e4b7653cf02e192897ed.js
diff --git a/test-webpack/output/shared.356e651d06d2a689e718.js b/test-webpack/output/shared.356e651d06d2a689e718.js
diff --git a/test-webpack/output/shared.356e651d06d2a689e718.js.LICENSE.txt b/test-webpack/output/shared.356e651d06d2a689e718.js.LICENSE.txt
@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Lodash <https://lodash.com/>
+ * Copyright OpenJS Foundation and other contributors <https://openjsf.org/>
+ * Released under MIT license <https://lodash.com/license>
+ * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
+ * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
+ */
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
diff --git a/test-webpack/output/vendor.c5d7e9c9df7760116072.js b/test-webpack/output/vendor.c5d7e9c9df7760116072.js
diff --git a/test-webpack/package-lock.json b/test-webpack/package-lock.json
diff --git a/test-webpack/package.json b/test-webpack/package.json
@@ -27,5 +27,9 @@
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.15.1",
     "webpack-merge": "^5.10.0"
+  },
+  "dependencies": {
+    "lodash": "^4.17.15",
+    "vanilla-tilt": "^1.8.1"
   }
 }
diff --git a/test-webpack/src/hello.js b/test-webpack/src/hello.js
@@ -0,0 +1,25 @@
+import _ from "lodash";
+
+console.log("Hello from hello.js");
+
+const mahasiswa = [
+  {
+    nama: "Test 1",
+    email: "test1@gmail.com",
+    jurusan: "test 1",
+  },
+  {
+    nama: "Test 2",
+    email: "test2@gmail.com",
+    jurusan: "test 2",
+  },
+  {
+    nama: "Test 3",
+    email: "test3@gmail.com",
+    jurusan: "test 3",
+  },
+];
+
+const mhs = _.find(mahasiswa, { nama: "Test 3" });
+
+console.log(mhs);
diff --git a/test-webpack/src/index.js b/test-webpack/src/index.js
@@ -1,5 +1,6 @@
-require("./vendor");
 import css from "./style.scss";
+import _ from "lodash";
+
 import { run } from "./app/app.js";
 import { AlertService } from "./app/services/alert.service.js";
 import { CalculatorService } from "./app/services/calculator.service.js";
@@ -10,3 +11,6 @@ const calculatorService = new CalculatorService();
 const jokesService = new JokesService();
 
 run(alertService, calculatorService, jokesService);
+
+const text = _.toUpper("Hello from index.js");
+console.log(text);
diff --git a/test-webpack/src/template.html b/test-webpack/src/template.html
@@ -7,7 +7,7 @@
   </head>
 
   <body>
-    <img src="img/cat.jpg" alt="image" class="cat-img" />
+    <img src="img/cat.jpg" alt="image" class="cat-img" data-tilt />
     <div class="row justify-content-center mt-5">
       <div class="col-4">
         <div class="card">

diff --git a/test-webpack/src/vendor.js b/test-webpack/src/vendor.js
@@ -1 +1,2 @@
 import * as bootstrap from "bootstrap";
+import VanillaTilt from "vanilla-tilt";
diff --git a/test-webpack/webpack.config.js b/test-webpack/webpack.config.js
@@ -4,8 +4,21 @@ const path = require("path");
 
 module.exports = {
   entry: {
-    main: "./src/index.js",
+    main: {
+      import: "./src/index.js",
+      dependOn: "shared",
+    },
     vendor: "./src/vendor.js",
+    hello: {
+      import: "./src/hello.js",
+      dependOn: "shared",
+    },
+    shared: "lodash",
+  },
+  optimization: {
+    splitChunks: {
+      chunks: "all",
+    },
   },
   plugins: [
     new HtmlWebpackPlugin({