Webpack: Satu Hal Sekaligus.

Setiap kali saya mencoba mempelajari skrip build, bundler, atau hal-hal javascript lainnya, saya kesulitan menemukan tutorial yang tidak ingin saya menyiapkan semuanya.

Saat Anda belajar, Anda tidak perlu menyiapkan aplikasi React/Redux dengan pengujian Sass, Flow, dan Jest. Terkadang Anda hanya ingin melakukan satu hal dalam satu waktu.

Tutorial ini tentang menyiapkan proyek Webpack dan kami hanya akan melakukan seminimal mungkin.

Webpack adalah pemaket. Semua file Javascript, HTML, CSS, Sass, JSX, atau lainnya Anda akan digabungkan menjadi satu atau dua file.

Selain memungkinkan Anda menggunakan teknologi seperti Sass atau React, Webpack memungkinkan Anda membagi file dengan mudah dan menggunakan sintaks modul ES6 seperti:

import myThing from './myThing.js'

Instalasi

Untuk menginstal Webpack, jalankan saja:

npm install webpack -g

File Konfigurasi

Memiliki Webpack saja tidak cukup. Dalam proyek Anda, Anda memerlukan file webpack.config.js. Di sinilah Anda menjelaskan kepada webpack apa yang Anda ingin lakukan.

Saya memulai dengan struktur file yang terlihat seperti berikut:

Mari kita mulai dengan contoh yang sangat sederhana:

module.exports = {
  entry: './src/app.js', // This tells webpack where to start
  output: {
    filename: './build/bundle.js' // This tells webpack the output
  }
};

Untuk berjaga-jaga, jika Anda belum pernah melihat sintaks module.exports sebelumnya, Anda harus memeriksa dokumentasi Modul untuk Node:

Mari kita mencobanya!

Coba jalankan $ webpack pada baris perintah di folder proyek Anda. (Perhatikan bahwa saya menggunakan $ untuk menandakan bahwa ini harus dijalankan dari baris perintah; jangan sertakan $ dalam perintah Anda) Anda akan melihat sesuatu seperti:

Anda harus memperhatikan bahwa webpack membuat folder build untuk kita dengan file bundle.js di dalamnya. Saat ini Anda tidak perlu khawatir dengan kode yang dibuatnya untuk Anda.

Mari kita wujudkan sesuatu.

Buat file baru bernama hello.js di folder yang sama dengan app.js Anda.

Dalam file itu, mari kita tentukan suatu fungsi dan kemudian ekspor.

// src/hello.js
function myFunction() {
  console.log("Hello Webpack!")
}
module.exports = myFunction

Lalu, di app.js Anda, mari kita require fungsi itu dan memanggilnya.

// src/app.js
var myFunction = require('./hello.js')
myFunction();

Jika kita menjalankan $ webpack sekarang, kita akan melihat kode kita terhubung dengan banyak hal yang tidak kita tulis.

Sekarang untuk beberapa HTML.

Meskipun bagian selanjutnya ini bukan praktik terbaik (kita akan membahas cara melakukannya dengan benar lain kali), mari kita buat file index.html di folder build.

Di dalam file itu, masukkan saja skrip kita dalam satu baris.

<!-- build/index.html -->
<script src="bundle.js"></script> 

Di milik saya, saya hanya menyertakan tag skrip. Sebagian besar browser akan menyertakan semua tag html dan body lainnya untuk Anda, jadi ketika bermain-main seperti ini, kita tidak perlu mengkhawatirkannya.

Jika Anda membuka file itu di chrome dan membuka alat dev dengan cmd-opt-i di Mac atau ctrl-shift-i di Windows, Anda akan melihat keluaran console.log kami di konsol!

Mempunyai masalah? Semua kode yang saya gunakan tersedia di Github.