Catatan Belajar Webpack


Free $20 Linode Cloud hosting Coupon, register at  Free Linode Cloud Hosting

(Coupon $20 available at Linode $.20 Coupon ) 👍🏿

Apa itu webpack?

Webpack adalah tools untuk membundle modul-modul Javascript. Jika Anda mulai serius untuk membangun aplikasi HTML 5 – Javascript hingga skala besar tools ini akan sangat membantu. Anda dapat mengelola source code Javascript Anda yg kompleks, lalu membundlenya menjadi satu kesatuan file yg mudah di include ke dalam file HTML Anda. Dengan menggunakan webpack, maka Anda diperbolehkan melakukan include antara file JS dengan perintah require seperti di NodeJS dan membangun modul JS untuk dapat dipakai reusable keluar lingkup file JS lain dengan perintah module.exports yg juga sama seperti di NodeJS. Lalu setelah source code Anda selesai ditulis maka Anda dapat membundle keseluruhan file JS Anda menjadi sebuah file JS yg dapat dengan mudah diintegrasikan ke dokumen HTML.

Sumber: qaiserlab

 

Instalasi dan Persiapan Dasar

1.prepare-folder
mkdir webpack-demo
2.init-project
npm init -y
3.save-webpack-locally
npm install webpack –save-dev (install Webpack locally)
4.create-basic-files
Created files and folders, isi ketiga files disini

Install Babel, ES6 transpiller dkk (locally)

5.install-babel
Install kelengkapan
6.npm-start1
Sekarang kita punya npm start dan npm build
6.npm-start2
folder dist dan file bundle.js dibuat oleh webpack saat npm start

Run Dev server dan Cek di Browser

9.run1
Development server
9.run2
Output di Browser

 run npm run build to compile our bundle in production mode with UglifyJS

 

Menggunakan Javascript Modules dengan Webpack

Contoh kasus: lodash

npm install lodash --save

10.isntall-lodash.png

touch ./src/people.js

Yang berisi:

// src/people.js
const people = [{
  manager: 'Jen',
  name: 'Bob'
}, {
  manager: 'Jen',
  name: 'Sue'
}, {
  manager: 'Bob',
  name: 'Shirley'
}, {
  manager: 'Bob',
  name: 'Terrence'
}]

export default people

1 // src/app.js
2 import {groupBy} from ‘lodash/collection’
3 import people from ‘./people’
4
5 const managerGroups = groupBy(people, ‘manager’)
6
7 const root = document.querySelector(‘#root’)
8
9 root.innerHTML = `Heello! <br /> <pre>${JSON.stringify(managerGroups, null, 2)}</pre>`

 

11.build-watch-bareng.png
webpack –watch dan webpack-dev-server jalan bersama

Loaders

Loaders adalah

Contoh loaders:

  1. sass-loader transforms Sass into CSS.
  2. css-loader parses the CSS into JavaScript and resolves any dependencies.
  3. style-loader outputs our CSS into a <style> tag in the document.
12.loaders-es6.png
Loaders untuk babel yang merubah es6 ke es5

Mari kita coba semua loaders yang ada diatas

npm install css-loader style-loader sass-loader node-sass --save-dev

13.install-loader

 touch ./src/style.scss
 import './style.scss' // di app.js

12.scss1.png

13.new-rules
new rules in  webpack.config.js

Contoh Loader File

app.js


import codeURL from './code.png'
const img = document.createElement('img')
img.src = codeURL
img.style.backgroundColor = "#2B3A42"
img.style.padding = "20px"

16.img-file-loader
Gambar di load ssebagai base64

Membuat CSS terpisan dari file CSS

Sebelumnya kode CSS berada disini:

 

 

 

17.css-difile-ygsama
CSS ada di head
18.extract-text.png
npm install extract-text-webpack-plugin@2.0.0-beta.4 --save-dev

12.load-css12.load-css2

Tambahkan <link rel=”stylesheet” href=”dist/app_bundle.css”> di index.html

 

 

 

Sumber

  1. https://www.sitepoint.com/beginners-guide-to-webpack-2-and-module-bundling/
  2. http://qaiserlab.com/2017/04/tutorial-cara-menggunakan-webpack
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s