Skip to content

Commit

Permalink
try webpack custom config
Browse files Browse the repository at this point in the history
  • Loading branch information
@fnurrahmah125
fnurrahmah125 committed Nov 1, 2023
1 parent 3f0a53e commit 7019ee3
Show file tree
Hide file tree
Showing 4 changed files with 277 additions and 2 deletions.
2 changes: 1 addition & 1 deletion test-webpack/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,6 +103,6 @@ <h5 class="modal-title" id="jokesModalLabel">Joke Hari Ini 🤣</h5>
crossorigin="anonymous"
></script>

<script src="./dist/main.js"></script>
<script src="./output/bundle.js"></script>
</body>
</html>
262 changes: 262 additions & 0 deletions test-webpack/output/bundle.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,262 @@
/******/ (() => { // webpackBootstrap
/******/ "use strict";
/******/ var __webpack_modules__ = ({

/***/ "./src/app/app.js":
/*!************************!*\
!*** ./src/app/app.js ***!
\************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ run: () => (/* binding */ run)
/* harmony export */ });
/* harmony import */ var _utils_cekInputValid_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./utils/cekInputValid.js */ "./src/app/utils/cekInputValid.js");
/* harmony import */ var _utils_parseInput_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./utils/parseInput.js */ "./src/app/utils/parseInput.js");



const run = (alertService, calculatorService, jokesService) => {
alertService.sembunyikanError();

calculatorService.onClick(() => {
alertService.sembunyikanError();
const input = calculatorService.getInput();
const angka = (0,_utils_parseInput_js__WEBPACK_IMPORTED_MODULE_1__.parseInput)(...input);
if ((0,_utils_cekInputValid_js__WEBPACK_IMPORTED_MODULE_0__.cekInputValid)(...angka)) {
const [angka1, angka2] = angka;
calculatorService.setResult(angka1, angka2);
} else {
calculatorService.setResult("");
alertService.tampilkanErrorPenjumlahan(input, angka);
}
});

jokesService.onClick(() => {
fetch("https://candaan-api.vercel.app/api/text/random")
.then((response) => response.json())
.then((data) => {
jokesService.setModal(data.data);
});
});
};


/***/ }),

/***/ "./src/app/services/alert.service.js":
/*!*******************************************!*\
!*** ./src/app/services/alert.service.js ***!
\*******************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ AlertService: () => (/* binding */ AlertService)
/* harmony export */ });
/* harmony import */ var _utils_cekInputValid_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../utils/cekInputValid.js */ "./src/app/utils/cekInputValid.js");


class AlertService {
constructor() {
this.error = document.querySelector("#error");
}

tampilkanErrorPenjumlahan = (input, angka) => {
const hasil = input.reduce((pesan, nilai, index) => {
if ((0,_utils_cekInputValid_js__WEBPACK_IMPORTED_MODULE_0__.cekInputValid)(angka[index])) {
return pesan + "";
} else {
return pesan + `${nilai} itu bukan angka! `;
}
}, "Silahkan masukkan angka yang benar: ");

this.error.classList.remove("d-none");
this.error.innerText = hasil;
};

sembunyikanError = () => this.error.classList.add("d-none");
}


/***/ }),

/***/ "./src/app/services/calculator.service.js":
/*!************************************************!*\
!*** ./src/app/services/calculator.service.js ***!
\************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ CalculatorService: () => (/* binding */ CalculatorService)
/* harmony export */ });
class CalculatorService {
constructor() {
this.operand1 = document.querySelector("#operand1");
this.operand2 = document.querySelector("#operand2");
this.tombolTambah = document.querySelector("#tombol-tambah");
this.hasil = document.querySelector("#hasil");
}

getInput() {
return [this.operand1.value, this.operand2.value];
}

setResult(angka1, angka2) {
this.hasil.innerText = angka1 + angka2;
}

onClick(cb) {
this.tombolTambah.addEventListener("click", cb);
}
}


/***/ }),

/***/ "./src/app/services/jokes.service.js":
/*!*******************************************!*\
!*** ./src/app/services/jokes.service.js ***!
\*******************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ JokesService: () => (/* binding */ JokesService)
/* harmony export */ });
class JokesService {
constructor() {
this.tombolJokes = document.querySelector("#jokes-receh");
this.modalBody = document.querySelector(".modal-body");
}

setModal(str) {
this.modalBody.innerHTML = str;
}

onClick(cb) {
this.tombolJokes.addEventListener("click", cb);
}
}


/***/ }),

/***/ "./src/app/utils/cekInputValid.js":
/*!****************************************!*\
!*** ./src/app/utils/cekInputValid.js ***!
\****************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ cekInputValid: () => (/* binding */ cekInputValid)
/* harmony export */ });
const cekInputValid = (...angka) => {
return angka.every((num) => typeof num === "number" && !isNaN(num));
};


/***/ }),

/***/ "./src/app/utils/parseInput.js":
/*!*************************************!*\
!*** ./src/app/utils/parseInput.js ***!
\*************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ parseInput: () => (/* binding */ parseInput)
/* harmony export */ });
const parseInput = (...input) => {
return input.map((str) => parseInt(str));
};


/***/ })

/******/ });
/************************************************************************/
/******/ // The module cache
/******/ var __webpack_module_cache__ = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ var cachedModule = __webpack_module_cache__[moduleId];
/******/ if (cachedModule !== undefined) {
/******/ return cachedModule.exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = __webpack_module_cache__[moduleId] = {
/******/ // no module.id needed
/******/ // no module.loaded needed
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/************************************************************************/
/******/ /* webpack/runtime/define property getters */
/******/ (() => {
/******/ // define getter functions for harmony exports
/******/ __webpack_require__.d = (exports, definition) => {
/******/ for(var key in definition) {
/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
/******/ }
/******/ }
/******/ };
/******/ })();
/******/
/******/ /* webpack/runtime/hasOwnProperty shorthand */
/******/ (() => {
/******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
/******/ })();
/******/
/******/ /* webpack/runtime/make namespace object */
/******/ (() => {
/******/ // define __esModule on exports
/******/ __webpack_require__.r = (exports) => {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/ })();
/******/
/************************************************************************/
var __webpack_exports__ = {};
// This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
(() => {
/*!**********************!*\
!*** ./src/index.js ***!
\**********************/
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _app_app_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./app/app.js */ "./src/app/app.js");
/* harmony import */ var _app_services_alert_service_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./app/services/alert.service.js */ "./src/app/services/alert.service.js");
/* harmony import */ var _app_services_calculator_service_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./app/services/calculator.service.js */ "./src/app/services/calculator.service.js");
/* harmony import */ var _app_services_jokes_service_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./app/services/jokes.service.js */ "./src/app/services/jokes.service.js");





const alertService = new _app_services_alert_service_js__WEBPACK_IMPORTED_MODULE_1__.AlertService();
const calculatorService = new _app_services_calculator_service_js__WEBPACK_IMPORTED_MODULE_2__.CalculatorService();
const jokesService = new _app_services_jokes_service_js__WEBPACK_IMPORTED_MODULE_3__.JokesService();

(0,_app_app_js__WEBPACK_IMPORTED_MODULE_0__.run)(alertService, calculatorService, jokesService);

})();

/******/ })()
;
3 changes: 2 additions & 1 deletion test-webpack/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@
"description": "",
"private": true,
"scripts": {
"open:prod": "webpack"
"open:prod": "webpack",
"watch": "webpack --watch"
},
"keywords": [],
"author": "",
Expand Down
12 changes: 12 additions & 0 deletions test-webpack/webpack.config.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
const path = require("path");

module.exports = {
mode: "development",
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, "output"),
filename: "bundle.js",
},
watch: true,
devtool: false,

This comment has been minimized.

Sign in to view

Copy link
@fnurrahmah125

fnurrahmah125 Nov 1, 2023 •
edited

Author Owner

ℹ️ to remove eval()
};

0 comments on commit 7019ee3

Please sign in to comment.