Apa yang Dilakukan Webpack, dan Bagaimana Cara Menggunakannya untuk Situs Web Saya? – CloudSavvy IT

0


Webpack adalah utilitas yang dapat menggabungkan file JavaScript Anda. Ini memungkinkan Anda menjadi lebih terorganisir dan produktif, dan juga memungkinkan penggunaan bahasa yang telah diproses sebelumnya seperti SASS dan TypeScript.

Untuk apa Webpack?

Bayangkan Anda telah mengerjakan situs web dengan banyak JavaScript khusus. Anda telah berada di proyek ini untuk sementara waktu, dan hal-hal dengan cepat menjadi tidak terkendali. Milikmu index.html memiliki 20 berbeda <script> menandai semua sumber file yang berbeda; beberapa adalah milik Anda sendiri, beberapa adalah sumber daya eksternal yang Anda andalkan. Mengelola ini sulit, terutama karena cara sebagian besar browser menangani pemuatan JavaScript. Bagaimana Anda memastikan kode Anda dijalankan setelah jQuery dimuat? Biasanya, Anda hanya menempatkan jQuery secara fisik terlebih dahulu di HTML, tetapi ini sulit untuk mengelola banyak perbedaan.

Ada juga masalah kinerja. Setiap file skrip perlu dimuat secara terpisah. Dan untuk memperburuk keadaan, sebagian besar JavaScript memblokir perenderan, artinya situs web Anda bahkan tidak akan ditampilkan sampai selesai mengunduh, menguraikan, dan menjalankan JavaScript. Anda dapat melihat ini beraksi di bawah tab Jaringan dari Alat Dev Chrome, yang menunjukkan permintaan dikirim. Semakin banyak permintaan yang Anda buat, semakin lama waktu yang dibutuhkan untuk menyelesaikan semuanya.

Alat Pengembang Chrome menunjukkan permintaan yang sedang dikirim.

Solusinya di sini adalah bundling. Alih-alih menautkan ke sumber daya eksternal, Anda akan mengunduh semuanya secara lokal, dan memasukkannya sebagai dependensi kode Anda. Webpack menggabungkan semuanya menjadi satu main.js file yang berisi semua yang dibutuhkan situs Anda. Anda kemudian cukup memasukkan satu file JavaScript itu, dan menyingkirkan yang lainnya <script> tag.

Ini memungkinkan Anda untuk membagi kode menjadi beberapa file tanpa harus khawatir tentang masalah konkurensi, masalah namespace, atau waktu pemuatan situs. Webpack juga mengompresi dan memperkecil kode produksi untuk menghemat lebih banyak ruang.

Webpack Membantu Anda Mengatur Aset Situs Anda

Pendeknya, paket web memungkinkan Anda untuk menggunakan require() berfungsi untuk memasukkan satu file JavaScript ke file lain. Ini tidak didukung di browser mana pun, karena ini adalah sesuatu yang perlu dijalankan oleh bundler JavaScript seperti Webpack, Meneguk, atau Browserify sebelum dikirim ke klien. Ini bisa menjadi sesuatu yang sederhana, seperti mengimpor ketergantungan dari npm:

var axios = require('axios') //node_modules/axios/index.js

Atau sesuatu yang lebih rumit, seperti menggunakan gambar dalam JavaScript:

<img src={ require('../../assets/logo.png') } />

Dalam kedua kasus, string dalam require fungsi diteruskan ke pemuat Webpack. Inilah yang mendefinisikan bagaimana Webpack memproses file. Misalnya, kita bisa menggunakan file-loader untuk menangani gambar:

{
  test: /.(png|jpe?g|gif)$/,
  use: [
    {
      loader: 'file-loader',
      options: {},
    },
  ],
}

Jika regex di test cocok dengan nama file, loader digunakan. Pada kasus ini, file-loader akan menghasilkan URL sesuai dengan konfigurasi Anda berdasarkan di mana file itu berakhir. Sekarang, ketika kita membangun file kita, img tag akan terlihat lebih seperti:

<img src={ 'https://cdn.yourwebsite.com/img/341234/logo.png' } />

Ini memungkinkan Anda untuk memiliki struktur file yang sangat terorganisir, karena Anda tidak perlu lagi khawatir tentang lokasi file dan menambahkan lebih banyak <script> dan <link> tag. Bukan hal yang aneh—terutama dengan kerangka kerja seperti React—memiliki proyek yang terlihat seperti ini:

src/
  |_styles/
  |  |_global.css
  |  |_darkTheme.css
  |_components/
  |  |_styles/
  |  |  |_buttonStyles.css
  |  |_button.js
  |_containers/
  |  |_homepage.js
  |  |_users.js
  |_index.js
  |_app.js
  |_package.json

Berbeda dengan memiliki 2000 baris panjang index.js. Hal ini membuat pengembangan lebih mudah dalam jangka panjang, dengan sedikit investasi waktu di awal transisi ke lingkungan berbasis Webpack.

Webpack Memungkinkan Anda Menggunakan Praprosesor

Karena yang dilakukan Webpack hanyalah meneruskan pemrosesan file ke loader, banyak keajaiban dapat terjadi pada loader tersebut. Anda berakhir dengan apa yang disebut praprosesor, yang dapat menambahkan fitur ke bahasa yang Anda gunakan.

Sebagai contoh, KELANCANGAN adalah preprocessor untuk CSS, menambahkan dukungan untuk variabel, nesting, mix in, impor dan pewarisan, dan a banyak hal lainnya. Ini luar biasa, dan bagian terbaiknya adalah sepenuhnya kompatibel dengan CSS biasa, jadi Anda tidak perlu khawatir tentang dukungan browser. Pengguna akhir tidak pernah tahu Anda menggunakan SASS untuk membuat situs Anda, karena Anda mengubah kode SASS menjadi kode CSS saat Anda menggabungkan dengan webpack.

Bahasa praproses lain yang berguna adalah Microsoft TypeScript. TypeScript adalah superset sintaksis JavaScript—artinya semua kode JavaScript adalah kode TypeScript yang valid—dan menambahkan dukungan untuk tipe yang ketat, mengubah JavaScript menjadi bahasa yang diketik dengan kuat seperti varian C. Ini sebenarnya adalah bahasa yang dikompilasi, menggunakan tsc utilitas, tetapi ts-loader Ekstensi Webpack menambahkan dukungan untuk itu. Loader akan mengkompilasi .ts file ke dalam .js file.

Jika Anda sudah puas dengan vanilla CSS dan JavaScript, Anda tidak perlu menggunakan praprosesor apa pun, tetapi bagi mereka yang ingin menggunakan sintaks vanilla generasi berikutnya, kami menyarankan Anda setidaknya menginstal Babel mendukung ES2015 ke atas. Ini akan memungkinkan Anda untuk menggunakan fitur ES2015 seperti import dan fungsi panah.

Cara Mengatur Webpack

Pertama, Anda harus menginstal Node, sehingga Anda dapat menjalankan JavaScript di luar browser. Kemudian, Anda dapat menginstal Webpack dari Node Package Manager (npm). Jalankan perintah ini dari root folder proyek Anda:

npm init -y
npm install webpack --save-dev
npm install webpack-cli --save-dev

Ini menciptakan yang baru package.json yang melacak paket yang telah Anda instal. Anda akan melihat folder baru bernama node_modules.

Webpack sekarang diinstal, dan Anda dapat menjalankannya dengan:

npx webpack

Ini mengasumsikan titik masuk untuk proyek Anda adalah ./src/index, dan Anda ingin file yang dibundel masuk dist/main.js. Jika Anda ingin mengonfigurasi pengaturan Anda secara berbeda atau mengonfigurasi loader, Anda harus membuat file konfigurasi. Ada banyak pilihan untuk Anda gunakan, dan pengaturan akan bervariasi berdasarkan apa yang Anda gunakan untuk Webpack, tetapi sebagian besar waktu file konfigurasi akan ditempatkan di root proyek Anda sebagai webpack.config.js. Anda harus memuat ini dengan --config flag, tetapi Anda dapat mengotomatiskannya dengan menentukan skrip di package.json:

"scripts": {
  "build": "webpack --config webpack.config.js"
}

Sekarang, setiap kali Anda menjalankan:

npm run build

Webpack akan menjalankan dan menggabungkan proyek Anda.

Kalau mau tidak usah lari”npm run build” setelah setiap perubahan yang Anda buat, Anda harus menginstal webpack-dev-server, yang secara otomatis akan dibangun kembali ketika perubahan dilakukan.

Leave A Reply

Your email address will not be published.