{"id":1333,"date":"2025-07-17T08:17:52","date_gmt":"2025-07-17T08:17:52","guid":{"rendered":"https:\/\/kompetenesia.com\/blog\/?p=1333"},"modified":"2025-07-17T08:17:53","modified_gmt":"2025-07-17T08:17:53","slug":"belajar-penggunaan-webpack-untuk-bundling","status":"publish","type":"post","link":"https:\/\/kompetenesia.com\/blog\/belajar-penggunaan-webpack-untuk-bundling\/","title":{"rendered":"Belajar Penggunaan Webpack untuk Bundling"},"content":{"rendered":"\n<p>Jika kamu mulai terjun ke dunia pengembangan web modern, kamu mungkin pernah mendengar nama Webpack\u00a0disebut-sebut. <\/p>\n\n\n\n<p>Webpack adalah module bundler sebuah alat yang sangat membantu dalam mengelola berbagai file dan dependensi dalam proyek JavaScript. <\/p>\n\n\n\n<p>Dengan Webpack, kamu bisa menggabungkan file JavaScript, CSS, gambar, hingga font menjadi satu atau beberapa file output yang lebih efisien.<\/p>\n\n\n\n<p>Mempelajari penggunaan Webpack untuk bundling&nbsp;akan sangat mempermudah proses pengembangan aplikasi web, karena kamu bisa mengoptimalkan performa website dan mengurangi kompleksitas dalam pengelolaan file.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Baca Juga : <a href=\"https:\/\/kompetenesia.com\/blog\/sertifikasi-web-developer\/\">Sertifikasi Web Developer<\/a><\/p>\n<\/blockquote>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_76 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/kompetenesia.com\/blog\/belajar-penggunaan-webpack-untuk-bundling\/#Kenapa_Harus_Belajar_Penggunaan_Webpack_untuk_Bundling\" >Kenapa Harus Belajar Penggunaan Webpack untuk Bundling?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/kompetenesia.com\/blog\/belajar-penggunaan-webpack-untuk-bundling\/#Cara_Kerja_Webpack_Secara_Singkat\" >Cara Kerja Webpack Secara Singkat<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/kompetenesia.com\/blog\/belajar-penggunaan-webpack-untuk-bundling\/#Struktur_Dasar_Webpack\" >Struktur Dasar Webpack<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/kompetenesia.com\/blog\/belajar-penggunaan-webpack-untuk-bundling\/#1_Entry\" >1. Entry<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/kompetenesia.com\/blog\/belajar-penggunaan-webpack-untuk-bundling\/#2_Output\" >2. Output<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/kompetenesia.com\/blog\/belajar-penggunaan-webpack-untuk-bundling\/#3_Loaders\" >3. Loaders<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/kompetenesia.com\/blog\/belajar-penggunaan-webpack-untuk-bundling\/#4_Plugins\" >4. Plugins<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/kompetenesia.com\/blog\/belajar-penggunaan-webpack-untuk-bundling\/#Instalasi_dan_Setup_Webpack\" >Instalasi dan Setup Webpack<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/kompetenesia.com\/blog\/belajar-penggunaan-webpack-untuk-bundling\/#Membuat_Proyek_Sederhana_dengan_Webpack\" >Membuat Proyek Sederhana dengan Webpack<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/kompetenesia.com\/blog\/belajar-penggunaan-webpack-untuk-bundling\/#Manfaat_Menggunakan_Webpack_dalam_Proyek_Nyata\" >Manfaat Menggunakan Webpack dalam Proyek Nyata<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/kompetenesia.com\/blog\/belajar-penggunaan-webpack-untuk-bundling\/#Tips_Efektif_Belajar_Penggunaan_Webpack_untuk_Bundling\" >Tips Efektif Belajar Penggunaan Webpack untuk Bundling<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/kompetenesia.com\/blog\/belajar-penggunaan-webpack-untuk-bundling\/#Kesimpulan\" >Kesimpulan<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Kenapa_Harus_Belajar_Penggunaan_Webpack_untuk_Bundling\"><\/span>Kenapa Harus Belajar Penggunaan Webpack untuk Bundling?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Mungkin kamu bertanya-tanya, kenapa sih harus repot-repot belajar penggunaan Webpack untuk bundling? Jawabannya simpel karena Webpack bisa mengautomasi banyak hal yang sebelumnya kamu lakukan secara manual. <\/p>\n\n\n\n<p>Misalnya, menggabungkan banyak file JS, meminimalkan ukuran file, dan mengatur urutan pemanggilan script.<\/p>\n\n\n\n<p>Selain itu, Webpack juga memungkinkan kamu memakai fitur-fitur canggih seperti hot module replacement, code splitting, dan tree shaking.<\/p>\n\n\n\n<p> Jadi, bukan hanya proyek kamu jadi lebih rapi, tapi performa dan kecepatan loading-nya juga meningkat secara signifikan.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Cara_Kerja_Webpack_Secara_Singkat\"><\/span>Cara Kerja Webpack Secara Singkat<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Sebelum terlalu dalam, penting buat kamu memahami gambaran umum cara kerja Webpack. <\/p>\n\n\n\n<p>Webpack bekerja dengan konsep module dan dependency. Setiap file dalam proyekmu dianggap sebagai modul, dan Webpack akan menelusuri semua dependensi dari file utama (biasanya index.js) untuk kemudian membundlenya jadi satu atau beberapa file output.<\/p>\n\n\n\n<p>Webpack juga menggunakan file konfigurasi webpack.config.js&nbsp;untuk mengatur bagaimana proses bundling berjalan. Di sinilah kamu bisa menentukan entry point, output, loader, dan plugin yang dibutuhkan.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Struktur_Dasar_Webpack\"><\/span>Struktur Dasar Webpack<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Nah, sekarang kita masuk ke bagian penting dalam belajar penggunaan Webpack untuk bundling, yaitu memahami struktur dan elemen utama dalam konfigurasi Webpack.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Entry\"><\/span>1. Entry<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Entry adalah titik masuk pertama bagi Webpack untuk mulai bekerja. File ini akan menjadi titik awal dari seluruh proses bundling. Biasanya berupa file JavaScript utama seperti main.js&nbsp;atau app.js.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_Output\"><\/span>2. Output<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Output menentukan di mana dan dengan nama apa hasil bundling akan disimpan. Kamu bisa mengatur path dan filename agar sesuai kebutuhan.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3_Loaders\"><\/span>3. Loaders<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Loaders digunakan untuk memproses file selain JavaScript, misalnya CSS, SCSS, gambar, atau file font. Contohnya, untuk mengimpor file CSS ke dalam JavaScript, kamu bisa menggunakan css-loader&nbsp;dan style-loader.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"4_Plugins\"><\/span>4. Plugins<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Plugins memperluas kemampuan Webpack. Beberapa plugin populer antara lain HtmlWebpackPlugin&nbsp;untuk meng-generate file HTML otomatis, dan MiniCssExtractPlugin&nbsp;untuk memisahkan CSS dari JavaScript.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Instalasi_dan_Setup_Webpack\"><\/span>Instalasi dan Setup Webpack<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Sebelum kamu bisa mulai bereksperimen, tentunya kamu harus menginstal Webpack dulu. Untuk itu, pastikan Node.js dan npm sudah terpasang di komputermu.<\/p>\n\n\n\n<p>Langkah pertama, buat folder proyek baru dan jalankan:<\/p>\n\n\n\n<p>npm init -y<\/p>\n\n\n\n<p>Lalu instal Webpack dan CLI-nya:<\/p>\n\n\n\n<p>npm install &#8211;save-dev webpack webpack-cli<\/p>\n\n\n\n<p>Kemudian buat file webpack.config.js&nbsp;dan isikan konfigurasi dasar:<\/p>\n\n\n\n<p>const path = require(&#8216;path&#8217;);<\/p>\n\n\n\n<p>module.exports = {<\/p>\n\n\n\n<p>&nbsp;&nbsp;entry: &#8216;.\/src\/index.js&#8217;,<\/p>\n\n\n\n<p>&nbsp;&nbsp;output: {<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;filename: &#8216;bundle.js&#8217;,<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;path: path.resolve(__dirname, &#8216;dist&#8217;),<\/p>\n\n\n\n<p>&nbsp;&nbsp;},<\/p>\n\n\n\n<p>&nbsp;&nbsp;mode: &#8216;development&#8217;,<\/p>\n\n\n\n<p>};<\/p>\n\n\n\n<p>Kamu juga bisa menambahkan loader atau plugin sesuai kebutuhan nanti.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Membuat_Proyek_Sederhana_dengan_Webpack\"><\/span>Membuat Proyek Sederhana dengan Webpack<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Sebelum lanjut ke teknik lanjutan, yuk kita coba proyek sederhana agar kamu bisa langsung praktek belajar penggunaan Webpack untuk bundling. Buat file index.js&nbsp;di dalam folder src, dan tulis kode JavaScript sederhana.<\/p>\n\n\n\n<p>Misalnya:<\/p>\n\n\n\n<p>console.log(&#8216;Hello dari Webpack!&#8217;);<\/p>\n\n\n\n<p>Kemudian buat folder dist&nbsp;dan file HTML yang memuat bundle.js. Jalankan perintah berikut di terminal:<\/p>\n\n\n\n<p>npx webpack<\/p>\n\n\n\n<p>Setelah proses selesai, kamu akan mendapatkan file bundle.js&nbsp;di folder dist. Coba buka file HTML-nya di browser, dan kamu akan melihat hasilnya di console.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Manfaat_Menggunakan_Webpack_dalam_Proyek_Nyata\"><\/span>Manfaat Menggunakan Webpack dalam Proyek Nyata<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Salah satu alasan utama kenapa developer memilih Webpack adalah fleksibilitas dan kemampuannya dalam mengelola proyek skala kecil hingga besar. Saat kamu belajar penggunaan Webpack untuk bundling, kamu juga sedang belajar cara menyusun proyek yang scalable dan maintainable.<\/p>\n\n\n\n<p>Beberapa manfaat nyata yang bisa kamu rasakan antara lain:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Mengurangi duplikasi kode<\/li>\n\n\n\n<li>Mempercepat proses loading website<\/li>\n\n\n\n<li>Memudahkan pengelolaan file statis<\/li>\n<\/ul>\n\n\n\n<p>Mendukung pengembangan dengan berbagai teknologi frontend seperti React, Vue, dan Angular<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Tips_Efektif_Belajar_Penggunaan_Webpack_untuk_Bundling\"><\/span>Tips Efektif Belajar Penggunaan Webpack untuk Bundling<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Untuk pemula, tampilan awal Webpack mungkin terlihat membingungkan. Tapi tenang, dengan latihan dan dokumentasi yang tepat, kamu akan cepat terbiasa.<\/p>\n\n\n\n<p>Beberapa tips yang bisa kamu ikuti:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Mulailah dari proyek kecil, seperti satu halaman HTML dengan JavaScript.<\/li>\n\n\n\n<li>Pelajari dokumentasi resmi Webpack di webpack.js.org.<\/li>\n\n\n\n<li>Bereksperimenlah dengan loader dan plugin.<\/li>\n\n\n\n<li>Coba buat konfigurasi Webpack untuk proyek React atau Vue.<\/li>\n<\/ol>\n\n\n\n<p>Jangan takut gagal setiap error adalah peluang untuk belajar.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Kesimpulan\"><\/span>Kesimpulan<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Belajar penggunaan Webpack untuk bundling&nbsp;adalah langkah penting bagi siapa saja yang ingin menjadi developer front-end modern. Meskipun awalnya terlihat teknis dan kompleks, tapi dengan pendekatan yang santai dan praktek langsung, kamu bisa menguasainya.<\/p>\n\n\n\n<p>Webpack bukan sekadar alat bundling biasa. Ia adalah pondasi yang memungkinkan kamu membangun proyek yang efisien, cepat, dan scalable. Jadi, tunggu apa lagi? Yuk, mulai belajar penggunaan Webpack untuk bundling dari sekarang dan jadikan proyek kamu lebih profesional dan terstruktur<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Jika kamu mulai terjun ke dunia pengembangan web modern, kamu mungkin pernah mendengar nama Webpack\u00a0disebut-sebut. Webpack adalah module bundler sebuah alat yang sangat membantu dalam mengelola berbagai file dan dependensi&#8230;<\/p>\n","protected":false},"author":1,"featured_media":1334,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","footnotes":""},"categories":[134],"tags":[227,226],"class_list":["post-1333","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-developer","tag-bundling","tag-webpack","article","has-background","has-excerpt","has-avatar","has-author","has-date","has-comment-count","has-category-meta","has-read-more","has-post-media","thumbnail-"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Belajar Penggunaan Webpack untuk Bundling - kompetenesia<\/title>\n<meta name=\"description\" content=\"Belajar penggunaan Webpack untuk bundling\u00a0adalah langkah penting bagi siapa saja yang ingin menjadi developer front-end modern.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kompetenesia.com\/blog\/belajar-penggunaan-webpack-untuk-bundling\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Belajar Penggunaan Webpack untuk Bundling - kompetenesia\" \/>\n<meta property=\"og:description\" content=\"Belajar penggunaan Webpack untuk bundling\u00a0adalah langkah penting bagi siapa saja yang ingin menjadi developer front-end modern.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kompetenesia.com\/blog\/belajar-penggunaan-webpack-untuk-bundling\/\" \/>\n<meta property=\"og:site_name\" content=\"kompetenesia\" \/>\n<meta property=\"article:published_time\" content=\"2025-07-17T08:17:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-17T08:17:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kompetenesia.com\/blog\/wp-content\/uploads\/2025\/07\/kompetenesia-33.png\" \/>\n\t<meta property=\"og:image:width\" content=\"600\" \/>\n\t<meta property=\"og:image:height\" content=\"400\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kompetenesia.com\/blog\/belajar-penggunaan-webpack-untuk-bundling\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kompetenesia.com\/blog\/belajar-penggunaan-webpack-untuk-bundling\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\/\/kompetenesia.com\/blog\/#\/schema\/person\/cf16e1029064f41849bbeb60e1994525\"},\"headline\":\"Belajar Penggunaan Webpack untuk Bundling\",\"datePublished\":\"2025-07-17T08:17:52+00:00\",\"dateModified\":\"2025-07-17T08:17:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kompetenesia.com\/blog\/belajar-penggunaan-webpack-untuk-bundling\/\"},\"wordCount\":806,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kompetenesia.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/kompetenesia.com\/blog\/belajar-penggunaan-webpack-untuk-bundling\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kompetenesia.com\/blog\/wp-content\/uploads\/2025\/07\/kompetenesia-33.png\",\"keywords\":[\"Bundling\",\"Webpack\"],\"articleSection\":[\"Web Developer\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kompetenesia.com\/blog\/belajar-penggunaan-webpack-untuk-bundling\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kompetenesia.com\/blog\/belajar-penggunaan-webpack-untuk-bundling\/\",\"url\":\"https:\/\/kompetenesia.com\/blog\/belajar-penggunaan-webpack-untuk-bundling\/\",\"name\":\"Belajar Penggunaan Webpack untuk Bundling - kompetenesia\",\"isPartOf\":{\"@id\":\"https:\/\/kompetenesia.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kompetenesia.com\/blog\/belajar-penggunaan-webpack-untuk-bundling\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kompetenesia.com\/blog\/belajar-penggunaan-webpack-untuk-bundling\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kompetenesia.com\/blog\/wp-content\/uploads\/2025\/07\/kompetenesia-33.png\",\"datePublished\":\"2025-07-17T08:17:52+00:00\",\"dateModified\":\"2025-07-17T08:17:53+00:00\",\"description\":\"Belajar penggunaan Webpack untuk bundling\u00a0adalah langkah penting bagi siapa saja yang ingin menjadi developer front-end modern.\",\"breadcrumb\":{\"@id\":\"https:\/\/kompetenesia.com\/blog\/belajar-penggunaan-webpack-untuk-bundling\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kompetenesia.com\/blog\/belajar-penggunaan-webpack-untuk-bundling\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/kompetenesia.com\/blog\/belajar-penggunaan-webpack-untuk-bundling\/#primaryimage\",\"url\":\"https:\/\/kompetenesia.com\/blog\/wp-content\/uploads\/2025\/07\/kompetenesia-33.png\",\"contentUrl\":\"https:\/\/kompetenesia.com\/blog\/wp-content\/uploads\/2025\/07\/kompetenesia-33.png\",\"width\":600,\"height\":400,\"caption\":\"Belajar Penggunaan Webpack untuk Bundling\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kompetenesia.com\/blog\/belajar-penggunaan-webpack-untuk-bundling\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kompetenesia.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Belajar Penggunaan Webpack untuk Bundling\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kompetenesia.com\/blog\/#website\",\"url\":\"https:\/\/kompetenesia.com\/blog\/\",\"name\":\"kompetenesia\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/kompetenesia.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kompetenesia.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kompetenesia.com\/blog\/#organization\",\"name\":\"kompetenesia\",\"url\":\"https:\/\/kompetenesia.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/kompetenesia.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kompetenesia.com\/blog\/wp-content\/uploads\/2025\/06\/cropped-Logo_Kompetitor_Ditekindo_Transparan-26-removebg-preview.png\",\"contentUrl\":\"https:\/\/kompetenesia.com\/blog\/wp-content\/uploads\/2025\/06\/cropped-Logo_Kompetitor_Ditekindo_Transparan-26-removebg-preview.png\",\"width\":821,\"height\":304,\"caption\":\"kompetenesia\"},\"image\":{\"@id\":\"https:\/\/kompetenesia.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/kompetenesia.com\/blog\/#\/schema\/person\/cf16e1029064f41849bbeb60e1994525\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/kompetenesia.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c3dcf6ac8dbcf6d7ff9d94e77a3d4678358491d700ca4e9e22887fb52fcd0009?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/c3dcf6ac8dbcf6d7ff9d94e77a3d4678358491d700ca4e9e22887fb52fcd0009?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"sameAs\":[\"https:\/\/kompetenesia.com\"],\"url\":\"https:\/\/kompetenesia.com\/blog\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Belajar Penggunaan Webpack untuk Bundling - kompetenesia","description":"Belajar penggunaan Webpack untuk bundling\u00a0adalah langkah penting bagi siapa saja yang ingin menjadi developer front-end modern.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kompetenesia.com\/blog\/belajar-penggunaan-webpack-untuk-bundling\/","og_locale":"en_US","og_type":"article","og_title":"Belajar Penggunaan Webpack untuk Bundling - kompetenesia","og_description":"Belajar penggunaan Webpack untuk bundling\u00a0adalah langkah penting bagi siapa saja yang ingin menjadi developer front-end modern.","og_url":"https:\/\/kompetenesia.com\/blog\/belajar-penggunaan-webpack-untuk-bundling\/","og_site_name":"kompetenesia","article_published_time":"2025-07-17T08:17:52+00:00","article_modified_time":"2025-07-17T08:17:53+00:00","og_image":[{"width":600,"height":400,"url":"https:\/\/kompetenesia.com\/blog\/wp-content\/uploads\/2025\/07\/kompetenesia-33.png","type":"image\/png"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kompetenesia.com\/blog\/belajar-penggunaan-webpack-untuk-bundling\/#article","isPartOf":{"@id":"https:\/\/kompetenesia.com\/blog\/belajar-penggunaan-webpack-untuk-bundling\/"},"author":{"name":"admin","@id":"https:\/\/kompetenesia.com\/blog\/#\/schema\/person\/cf16e1029064f41849bbeb60e1994525"},"headline":"Belajar Penggunaan Webpack untuk Bundling","datePublished":"2025-07-17T08:17:52+00:00","dateModified":"2025-07-17T08:17:53+00:00","mainEntityOfPage":{"@id":"https:\/\/kompetenesia.com\/blog\/belajar-penggunaan-webpack-untuk-bundling\/"},"wordCount":806,"commentCount":0,"publisher":{"@id":"https:\/\/kompetenesia.com\/blog\/#organization"},"image":{"@id":"https:\/\/kompetenesia.com\/blog\/belajar-penggunaan-webpack-untuk-bundling\/#primaryimage"},"thumbnailUrl":"https:\/\/kompetenesia.com\/blog\/wp-content\/uploads\/2025\/07\/kompetenesia-33.png","keywords":["Bundling","Webpack"],"articleSection":["Web Developer"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kompetenesia.com\/blog\/belajar-penggunaan-webpack-untuk-bundling\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kompetenesia.com\/blog\/belajar-penggunaan-webpack-untuk-bundling\/","url":"https:\/\/kompetenesia.com\/blog\/belajar-penggunaan-webpack-untuk-bundling\/","name":"Belajar Penggunaan Webpack untuk Bundling - kompetenesia","isPartOf":{"@id":"https:\/\/kompetenesia.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kompetenesia.com\/blog\/belajar-penggunaan-webpack-untuk-bundling\/#primaryimage"},"image":{"@id":"https:\/\/kompetenesia.com\/blog\/belajar-penggunaan-webpack-untuk-bundling\/#primaryimage"},"thumbnailUrl":"https:\/\/kompetenesia.com\/blog\/wp-content\/uploads\/2025\/07\/kompetenesia-33.png","datePublished":"2025-07-17T08:17:52+00:00","dateModified":"2025-07-17T08:17:53+00:00","description":"Belajar penggunaan Webpack untuk bundling\u00a0adalah langkah penting bagi siapa saja yang ingin menjadi developer front-end modern.","breadcrumb":{"@id":"https:\/\/kompetenesia.com\/blog\/belajar-penggunaan-webpack-untuk-bundling\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kompetenesia.com\/blog\/belajar-penggunaan-webpack-untuk-bundling\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/kompetenesia.com\/blog\/belajar-penggunaan-webpack-untuk-bundling\/#primaryimage","url":"https:\/\/kompetenesia.com\/blog\/wp-content\/uploads\/2025\/07\/kompetenesia-33.png","contentUrl":"https:\/\/kompetenesia.com\/blog\/wp-content\/uploads\/2025\/07\/kompetenesia-33.png","width":600,"height":400,"caption":"Belajar Penggunaan Webpack untuk Bundling"},{"@type":"BreadcrumbList","@id":"https:\/\/kompetenesia.com\/blog\/belajar-penggunaan-webpack-untuk-bundling\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kompetenesia.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Belajar Penggunaan Webpack untuk Bundling"}]},{"@type":"WebSite","@id":"https:\/\/kompetenesia.com\/blog\/#website","url":"https:\/\/kompetenesia.com\/blog\/","name":"kompetenesia","description":"","publisher":{"@id":"https:\/\/kompetenesia.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kompetenesia.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/kompetenesia.com\/blog\/#organization","name":"kompetenesia","url":"https:\/\/kompetenesia.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/kompetenesia.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/kompetenesia.com\/blog\/wp-content\/uploads\/2025\/06\/cropped-Logo_Kompetitor_Ditekindo_Transparan-26-removebg-preview.png","contentUrl":"https:\/\/kompetenesia.com\/blog\/wp-content\/uploads\/2025\/06\/cropped-Logo_Kompetitor_Ditekindo_Transparan-26-removebg-preview.png","width":821,"height":304,"caption":"kompetenesia"},"image":{"@id":"https:\/\/kompetenesia.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/kompetenesia.com\/blog\/#\/schema\/person\/cf16e1029064f41849bbeb60e1994525","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/kompetenesia.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/c3dcf6ac8dbcf6d7ff9d94e77a3d4678358491d700ca4e9e22887fb52fcd0009?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c3dcf6ac8dbcf6d7ff9d94e77a3d4678358491d700ca4e9e22887fb52fcd0009?s=96&d=mm&r=g","caption":"admin"},"sameAs":["https:\/\/kompetenesia.com"],"url":"https:\/\/kompetenesia.com\/blog\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/kompetenesia.com\/blog\/wp-json\/wp\/v2\/posts\/1333","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kompetenesia.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kompetenesia.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kompetenesia.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kompetenesia.com\/blog\/wp-json\/wp\/v2\/comments?post=1333"}],"version-history":[{"count":1,"href":"https:\/\/kompetenesia.com\/blog\/wp-json\/wp\/v2\/posts\/1333\/revisions"}],"predecessor-version":[{"id":1335,"href":"https:\/\/kompetenesia.com\/blog\/wp-json\/wp\/v2\/posts\/1333\/revisions\/1335"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kompetenesia.com\/blog\/wp-json\/wp\/v2\/media\/1334"}],"wp:attachment":[{"href":"https:\/\/kompetenesia.com\/blog\/wp-json\/wp\/v2\/media?parent=1333"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kompetenesia.com\/blog\/wp-json\/wp\/v2\/categories?post=1333"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kompetenesia.com\/blog\/wp-json\/wp\/v2\/tags?post=1333"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}