Memahami Webpack tidak sesulit memahami Wanita (Part I)

Konfigurasi Dasar Webpack.

Ok, judulnya agak berlebihan tapi memang itu kenyataannya. Tapi setelah dipelajari, webpack yang selama ini “menyakitkan” bagi saya ternyata teknologi ini sangat-sangat membantu produktivitas kita. Jadi artikel ini dibuat dengan tujuan membahas maksud dari setiap konfigurasi yang ada di Webpack, dan jika ada yang perlu dikoreksi mohon hubungi saya dan akan saya perbaiki agar artikel ini lebih bermanfaat ke teman-teman yang baru belajar Webpack seperti saya.

Intro

Untuk siapa artikel ini dibuat? Tentunya untuk teman-teman yang sedang paham Javascript, sedang bergulat dengan Webpack atau mungkin yang sedang belajar React.js. Dalam series ini nantinya akan saya contohkan dengan React.js. Langsung aja kita mulai dengan membuat project baru. (Pastikan sudah install Node)

$ mkdir belajarwebpack
$ cd belajarwebpack
$ npm init -y
$ npm install webpack --save-dev

Lalu otomatis akan muncul di devDependencies pada file package.json. Jangan lupa di dalam folder belajar webpack buat folder serta file lainnya dengan struktur seperti ini:

- app/
  - index.js
  - component.js
- build/
- package.json
- webpack.config.js

Nantinya kita akan mengubah file yang ada di dalam folder app/ ke dalam folder build sesuai dengan konfigurasi webpack.config.js

Setup assets

Semoga teman-teman tidak bosan dengan “Hello world”, jadi kita akan mulai koding pada file component.js, berikut kodenya:

app/component.js

module.exports = function() {
  var element = document.createElement('h1');
  element.innerHTML = 'Hello world!';
  return element;
}

app/index.js

var component = require('./component');
document.body.appendChild(component());

Agar tetap simple kita akan gunakan html-webpack-plugin untuk generate file index.html. Kita install dulu modulnya.

$ npm install html-webpack-plugin --save-dev

Lalu kita mulai konfigurasi file webpack.config.js nya.

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const PATH = {
  app: path.join(__dirname, 'app'),
  build: path.join(__dirname, 'build')
};
module.exports = {
  entry: {
   app: PATH.app
  },
  output: {
    path: PATH.build,
    filename: '[name].js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Belajar Webpack'
    })
  ]
}

Kalau sudah coba kita jalankan webpack dengan perintah berikut:

$ node_modules/.bin/webpack

Hasilnya:

Output di terminal setelah menjalankan Webpack

Untuk lihat hasilnya teman-teman bisa buka pada folder build, disana akan terdapat 2 buah file. Yaitu file app.js dan index.html.

Tambahkan shortcut Build

Kita bisa tambahkan shortcut pada file package.json agar kita tidak mengetik node_modules/.bin/webpack setiap kita ingin build ulang. Caranya, buka file package.json dan tambahkan pada key “scripts”:

...
"scripts": {
  "build": "webpack"
}
...

Kenapa bisa tanpa “node_modules/.bin”?

Karena npm otomatis sudah menambahkan “node_modules/.bin” pada path. Jadi dari pada menulis “build”: “node_modules/.bin/webpack” kita bisa hanya menulis “build”: “webpack”.

Kesimpulan

Oke itu untuk dasar-dasar konfigurasi webpack. Selanjutnya kita akan bahas bagaimana memisahkan file konfigurasi & menggunakan Live Reload.

Jika artikel ini bermanfaat jangan lupa di-share dan klik heart icon-nya.

Source code dapat dilihat di learn-webpack pada branch konfigurasi-awal

Artikel Lainnya

Artikel ini merupakan bagian dari Memahami Webpack tidak sesulit memahami Wanita the Series.

• Konfigurasi Dasar Webpack(anda sedang disini.)
• Memisahkan Konfigurasi Webpack, Integrasi Live Reload dan Loader CSS pada Webpack
• Mengenal devtool (dan source-map)
• Minifying, Splitting, Cleaning, Separating CSS Webpack Build
• Konfigurasi ReactJS (ongoing)

Memahami Webpack tidak sesulit memahami Wanita the Series