<commit_before>---
layout: post
title: Webpack Snorkling
---

Daftar Isi
==========

* [Pengantar](#pengantar)
* [Instalasi webpack](#instalasi-webpack)
* [Sekilas cara pemakaian](#sekilas-cara-pemakaian)
    * [1. Bundling dari coding yang menggunakan keyword import](#1-bundling-dari-coding-yang-menggunakan-keyword-import)
    * [2. Bundling dari banyak file terpisah-pisah menjadi bundle-test2.js](#2-bundling-dari-banyak-file-terpisah-pisah-menjadi-bundle-test2-js)
* [Konsep dasar webpack](#konsep-dasar-webpack)
    * [Context dan Entry](#context-dan-entry)
        * [Context](#context)
        * [Entry](#entry)
    * [Output](#output)
    * [Loaders](#loaders)
    * [Plugins](#plugins)
* [Zoom-IN sedikit untuk Entry - Output, dan Loaders - Plugins](#zoom-in-sedikit-untuk-entry-output-dan-loaders-plugins)
    * [Entry - Output Zoom-IN](#entry-output-zoom-in)
    * [Loaders - Plugins Zoom-IN](#loaders-plugins-zoom-in)
        * [Studi Kasus - Men-transpile (transformation compile) LESS menjadi CSS](#studi-kasus-men-transpile-transformation-compile-less-menjadi-css)
        * [Studi Kasus - Meminifikasi hasil bundling](#studi-kasus-meminifikasi-hasil-bundling)
* [Menyusun React Development Environment dengan Webpack 2 dan Babel](#menyusun-react-development-environment-dengan-webpack-2-dan-babel)
* [Kesimpulan](#kesimpulan)

## Pengantar
Kata "Snorkling" disini saya pakai sebagai kiasan yang berarti mempelajari dan menggunakan webpack hanya sampai pada level dasar dan 
pemula atau cukup tahu permukaan-permukaan nya saja. Tulisan ini akan membahas cara instalasi webpack, sedikit konsep webpack, dan 
penerapan / implementasi dari konsep webpack. Semoga dengan adanya tulisan ini, saya pribadi dapat dengan mudah menerapkan webpack 
dimana saja karena semua tata cara instalasi, konfigurasi, dan penggunaan tercatat disini semua.

## Instalasi webpack
Sebelum memulai instalasi webpack, pastikan kamu sudah install versi paling fresh Node.js terlebih dahulu. Release Node.js LTS yang 
palingbaru bisa menjadi pilihan yang ideal dan direkomendasikan. Karena kamu akan menemui banyak masalah dengan versi yang lebih lama 
seperti beberapa fungsionalitas yang hilang atau beberapa package terkait (dependency) yang belum didukung di versi lama.

Pertama, Install webpack dengan menggunakan `npm` (node package manager) dan ketersediaan package dibuat lokal. **Ingat perbedaan ada dua 
jenis ketersediaan package** setelah diinstall yaitu: **lokal** dan **global**. Opsi `--save-dev` membuat ketersediaan package menjadi 
lokal dan sebaliknya opsi `-g` membuat ketersediaan package menjadi global. 

```sh
mkdir bebas-aja-deh
cd bebas-aja-deh/
npm init<commit_msg>Update 2017-02-11-webpack-snorkling.md<commit_after>---
layout: post
title: Webpack Snorkling
---

Daftar Isi
==========

* [Pengantar](#pengantar)
* [Instalasi webpack](#instalasi-webpack)
* [Sekilas cara pemakaian](#sekilas-cara-pemakaian)
    * [1. Bundling dari coding yang menggunakan keyword import](#1-bundling-dari-coding-yang-menggunakan-keyword-import)
    * [2. Bundling dari banyak file terpisah-pisah menjadi bundle-test2.js](#2-bundling-dari-banyak-file-terpisah-pisah-menjadi-bundle-test2-js)
* [Konsep dasar webpack](#konsep-dasar-webpack)
    * [Context dan Entry](#context-dan-entry)
        * [Context](#context)
        * [Entry](#entry)
    * [Output](#output)
    * [Loaders](#loaders)
    * [Plugins](#plugins)
* [Zoom-IN sedikit untuk Entry - Output, dan Loaders - Plugins](#zoom-in-sedikit-untuk-entry-output-dan-loaders-plugins)
    * [Entry - Output Zoom-IN](#entry-output-zoom-in)
    * [Loaders - Plugins Zoom-IN](#loaders-plugins-zoom-in)
        * [Studi Kasus - Men-transpile (transformation compile) LESS menjadi CSS](#studi-kasus-men-transpile-transformation-compile-less-menjadi-css)
        * [Studi Kasus - Meminifikasi hasil bundling](#studi-kasus-meminifikasi-hasil-bundling)
* [Menyusun React Development Environment dengan Webpack 2 dan Babel](#menyusun-react-development-environment-dengan-webpack-2-dan-babel)
* [Kesimpulan](#kesimpulan)

## Pengantar
Kata "Snorkling" disini saya pakai sebagai kiasan yang berarti mempelajari dan menggunakan webpack hanya sampai pada level dasar dan 
pemula atau cukup tahu permukaan-permukaan nya saja. Tulisan ini akan membahas cara instalasi webpack, sedikit konsep webpack, dan 
penerapan / implementasi dari konsep webpack. Semoga dengan adanya tulisan ini, saya pribadi dapat dengan mudah menerapkan webpack 
dimana saja karena semua tata cara instalasi, konfigurasi, dan penggunaan tercatat disini semua.
<!--more-->

## Instalasi webpack
Sebelum memulai instalasi webpack, pastikan kamu sudah install versi paling fresh Node.js terlebih dahulu. Release Node.js LTS yang 
palingbaru bisa menjadi pilihan yang ideal dan direkomendasikan. Karena kamu akan menemui banyak masalah dengan versi yang lebih lama 
seperti beberapa fungsionalitas yang hilang atau beberapa package terkait (dependency) yang belum didukung di versi lama.

Pertama, Install webpack dengan menggunakan `npm` (node package manager) dan ketersediaan package dibuat lokal. **Ingat perbedaan ada dua 
jenis ketersediaan package** setelah diinstall yaitu: **lokal** dan **global**. Opsi `--save-dev` membuat ketersediaan package menjadi 
lokal dan sebaliknya opsi `-g` membuat ketersediaan package menjadi global. 

```sh
mkdir bebas-aja-deh
cd bebas-aja-deh/
npm init
{'fraction_non_alphanumeric': 0.10290579307791968, 'fraction_numerical': 0.004441976679622432, 'mean_word_length': 4.810752688172043, 'pattern_counts': {'":': 0, '<': 4, '<?xml version=': 0, '>': 4, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4317165', 'n_tokens_mistral': 2072, 'n_tokens_neox': 1971, 'n_words': 503}