The best way to learn is to write that down
OMFG that was from me, please somebody put my photo with some long exposure effect and add that quote awyisss...
Okayyyy langsung aja sebelum install dependensi package, mari di init dulu npmnya.. caranya ??? ._. (its always you)
oke gua kasi tau, sama kaya git init cuma syntaxnya aja beda karna dia npm jadi npm init (didalam folder apps kita)
sorry nama usernya jijik, dikarenakan pc saya itu BARU(GTX 1050 Ti inside).. belum sempat install ulang dan pemilik sebelumnya menamainya mungkin mencerminkan diri nya untuk memotivasi...
oke step selanjutnya tinggal kita install saja package berikut yg saya lampirkan
- - babel-plugin-transform-es2015-arrow-functions
- - babel-preset-react
- - babel-core
- - babel-cli
- - babel-loader
- - babel-preset-es2015
- - babel-preset-stage-2
- - webpack
- - webpack-dev-server
- - react
- - react-dom
silahkan tunggu.. proses memang agak sedikit lama tergantung koneksi internet anda~ anjay.
Jika proses sudah selesai maka ada file package.json anda yang berisi:
jika anda membaca artikel ini dan package tersebut sudah update mungkin akan ada beberapa error karna beberapa package yg terupdate akan tidak compatible dengan package yg outdated, berikut saya berikan isi package.json saya:
{
"name": "testing",
"version": "1.0.0",
"description": "test",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "adit guantengz",
"license": "ISC",
"dependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-transform-es2015-arrow-functions": "^6.22.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"react": "^16.1.1",
"react-dom": "^16.1.1",
"webpack": "^3.8.1",
"webpack-dev-server": "^2.9.4"
}
}
Oke jika sudah, silahkan tambahkan beberapa folder kedalam folder apps kita, untuk kasus ini saya menamakan nama directory apps yaitu "react", mari kita tambahkan beberapa folder kedalam folder react
Dist
Direktori ini menyimpan halaman html atau php kita yang siap di deploy kedalam production, nantinya webpack akan membundle file javascript yang telah kita gabungkan menjadi 1 juga meminified(optional) dan akan diletakan pada folder Dist
src
Direktori ini menyimpan file javascript,css,assets bagi web anda, di direktori ini adalah direktori proses Development anda, jadi semua js,css,image yang akan menjadi assets dan akan di bundle oleh webpack tersimpan pada direktori ini, contoh kita akan menggabungkan file logic.js dan react.js oleh webpack, anggap logic.js akan menangani semua frontend tentang logicnya.. dan react.js akan menangani letak front end dan layout element kita.
sebelum menambahkan file lainnya, mari menambahkan file webpack.config dan .babelrc untuk mengkonfigutasi library tersebut
berikut isi file dari .babelrc, saya screenshoot saja karna cuma sedikit :)
dan silahkan isi file webpack.config.js anda seperti dibawah ini:
const webpack = require('webpack');
const path = require('path');
const config = {
entry: {
app: [
path.resolve('src/react.js'),
path.resolve('src/logic.js')
]
},
output:{
path: path.resolve('dist'),
filename: 'bundle.js'
},
module:{
rules:[
{
test: /\.js$/,
loader: 'babel-loader',
}
]
},
devServer: {
contentBase: path.join(__dirname, "dist"),
compress:true,
port:9000
}
};
module.exports = config;
Ini adalah configurasi untuk webpack, anda harus memberi tahu webpack file apa saja yang akan dibundle dan di deploy olehnya, maka dari itu anda harus menuliskan webpack.config ini. Saya sebenarnya sangat menyarankan anda baca dokumentasi lengkap webpack pada website berikut : webpack .. agar anda dapat mengoreksi saya jika saya salah, akan saya jelaskan versi saya. Disini yang penting adalah entry dan output, mari hiraukan module dan devserver dulu.
Entry
Object Entry berisi object array, dimana nama objectnya akan menjadi sesuatu yang akan dibundle dan di deploy ke direktori Dist. Ingat direktori Dist berisi file yang siap untuk production. Dan pada kasus ini semua js akan di bundle kedalam 1 file js yaitu bundle.js. Jadi singkatnya object Entry berisi array app(ini alias, mari hiraukan) yang berisi file yang akan dibundle
menjadi 1.
Output
Output berisi beberapa object yang mempunyai fungsi masing masing
- path berisi path direktori production kita, dimana lokasi direktori itu adalah target dari semua javascript yang akan kita bundle
- filename berisi suatu nama semua javascript yang dibundle guna di import dari html nanti, contoh bundle.js
Module
Module ini berisi rule mengenai loader apa yang akan memproses suatu extension file, jika anda membundle css juga, maka anda membutuhkan css-loader (mari hiraukan ini).
dalam kasus ini, semua file ber extensi .js akan diload menggunakan loader yang bernama Babel-loader disinilah code ES6, si Babel ini yang akan mengcompile sintaks es6 kedalam es5
Devserver
Config ini hanya untuk mengkonfigurasi package webpack-dev-server(auto reload dkk) silahkan lihat tentang webpack dev server disini.
yup jika semua sudah di set, mari tambahkan file html untuk mengetest ini semua, tambahkan index.html pada direktori Dist yang berisi :
Dan tambahkan ini pada package.json:
mari tambahkan component React pada file react.js untuk menguji apakah react sudah bisa dicompile oleh babel:
dan tambahkan kode seperti dibawah didalam file logic.js untuk menguji apakah file tersebut dibundle webpack
okay semua sudah siap, silahkan jalankan perintah npm start pada command prompt atau terminal anda
silahkan buka http://localhost:9000/ untuk melihat apps kita yang dihosting oleh Webpack Dev Server (tetap berjalan pada Node.JS).
Yup ternyata react mudah sekali di integrasikan melalui webpack, oh iya jangan takut pakai webpack ya gan karna library ini sudah teruji handal dipakai oleh beberapa website. karna Twitter aja assetsnya dibundle oleh webpack ;)
Sekian ...
