Memulai dengan Webpack [Dengan Proyek Contoh]

Paket web adalah bundler modul yang memfasilitasi pembuatan aplikasi JavaScript yang kompleks. Ini telah mendapatkan daya tarik yang serius sejak komunitas Bereaksi memilihnya sebagai alat pembangun utamanya. Webpack adalah bukan manajer paket atau pelari tugas karena menggunakan pendekatan yang berbeda (lebih maju), tetapi tujuannya juga untuk mengatur proses pembangunan yang dinamis.

Webpack bekerja dengan JavaScript vanilla. Anda dapat menggunakannya untuk bundel aset statis aplikasi, seperti gambar, font, stylesheet, skrip menjadi satu file sementara mengurus semua dependensi.

Anda tidak perlu Webpack untuk membuat aplikasi atau situs web sederhana, misalnya yang hanya memiliki satu JavaScript dan satu file CSS dan beberapa gambar, namun itu bisa menjadi penyelamat bagi aplikasi yang lebih kompleks dengan beberapa aset dan dependensi.

Webpack vs pelari tugas vs. Browserify

Jadi, bagaimana Webpack menumpuk dibandingkan dengan alat membangun lainnya seperti Grunt, Gulp, atau Browserify?

Grunt dan Gulp adalah pelari tugas. Dalam file konfigurasi mereka, Anda tentukan tugas, dan pelari tugas mengeksekusi mereka. Itu alur kerja pelari tugas pada dasarnya terlihat seperti ini:

Namun, Webpack adalah bundler modul yang menganalisis seluruh proyek, mengatur pohon ketergantungan, dan membuat file JavaScript yang dibundel yang berfungsi untuk browser.

Browserify lebih dekat ke Webpack daripada pelari tugas, juga membuat grafik ketergantungan tetapi hanya melakukannya untuk modul JavaScript. Webpack melangkah lebih jauh, dan tidak hanya membundel kode sumber tetapi juga juga aset lainnya seperti gambar, stylesheet, font, dll.

Jika Anda ingin tahu lebih banyak tentang bagaimana Webpack dibandingkan dengan alat bangunan lain, Saya merekomendasikan Anda dua artikel:

Andrew Ray Webpack: Kapan Digunakan dan Mengapa di blognya sendiri
Rumah Cory Browserify vs Webpack di freeCodeCamp (dengan ilustrasi mengagumkan)

Dua ilustrasi di atas berasal dari Bahan webpack dari buku pegangan Pro React, sumber daya lain yang patut dilihat.

Empat konsep inti dari Webpack

Webpack punya empat opsi konfigurasi utama dipanggil “konsep inti” yang perlu Anda definisikan dalam proses pengembangan:

Masuk - itu titik pangkal grafik dependensi (satu atau lebih file JavaScript).
Keluaran - file yang Anda inginkan output yang akan dibundel ke (satu file JavaScript).
Loader - transformasi pada aset itu mengubahnya menjadi modul Webpack sehingga mereka bisa ditambahkan ke grafik ketergantungan. Contohnya, css-loader digunakan untuk impor file CSS.
Plugin - tindakan dan fungsi kustom dilakukan pada bundel. Misalnya, i18n-webpack-plugin menanamkan lokalisasi ke dalam bundel.

Loader bekerja berdasarkan per file sebelum kompilasi berlangsung. Plugin dieksekusi pada kode yang dibundel, di akhir proses kompilasi.

Instal Webpack

Untuk instal Webpack, buka baris perintah, navigasikan ke folder proyek Anda, dan jalankan perintah berikut:

 npm init

Jika Anda tidak ingin melakukan konfigurasi sendiri, Anda dapat membuat npm mengisi package.json file dengan nilai default dengan perintah berikut:

 npm init -y

Selanjutnya, instal Webpack:

 npm instal webpack --save-dev

Jika Anda telah menggunakan nilai default ini adalah bagaimana Anda package.json file akan terlihat seperti sekarang (propertinya bisa dalam urutan yang berbeda):

 "name": "_tests", "versi": "1.0.0", "description": "", "main": "webpack.config.js", "dependensi": "webpack": "^ 3.6 .0 "," devDependencies ": " webpack ":" ^ 3.6.0 "," script ": " test ":" echo \ "Kesalahan: tidak ada tes yang ditentukan \" && keluar 1 "," kata kunci ": []," penulis ":" "," lisensi ":" ISC "

Buat file konfigurasi

Anda harus membuat webpack.config.js mengajukan di folder root proyek. File konfigurasi ini memiliki peran sentral, karena di sinilah Anda akan melakukannya mendefinisikan empat konsep inti (titik masuk, keluaran, pemuat, plugin).

Itu webpack.config.js mengajukan memegang objek konfigurasi dari properti yang perlu Anda tentukan. Pada artikel ini, kita akan menentukan empat properti itu sesuai dengan empat konsep inti (masuk, keluaran, modul, dan plugin), tetapi objek config memiliki properti lain juga.

1. Buat titik masuk

Kamu bisa memiliki satu atau lebih titik masuk. Anda perlu mendefinisikannya di masuk milik.

Masukkan potongan kode berikut ke dalam webpack.config.js mengajukan. Saya t menentukan satu titik masuk:

 module.exports = entry: "./src/script.js";

Untuk menentukan lebih dari satu titik masuk yang dapat Anda gunakan baik array atau sintaks objek.

Di folder proyek Anda, buat yang baru src map dan a script.js file di dalamnya. Ini akan menjadi milikmu titik masuk. Untuk tujuan pengujian, adil tempatkan string Didalam itu. Saya menggunakan yang berikut (namun, Anda juga bisa menggunakan yang lebih menarik):

 const greeting = "Hai. Saya proyek pemula Webpack."; document.write (salam);

2. Tentukan output

Kamu bisa memiliki hanya satu file output. Webpack menggabungkan semua aset ke dalam file ini. Anda perlu mengkonfigurasi keluaran properti dengan cara berikut:

 const path = butuhkan ("path"); module.exports = entry: "./src/script.js", output: nama file: "bundle.js", path: path.resolve (__ dirname, 'dist');

Itu nama file properti mendefinisikan nama file yang dibundel, selagi jalan milik menentukan nama direktori. Contoh di atas akan membuat /dist/bundle.js mengajukan.

Meskipun tidak wajib, lebih baik melakukannya menggunakan path.resolve () metode ketika Anda menentukan jalan properti, seperti itu memastikan resolusi modul yang akurat (jalur absolut dari output dibuat sesuai dengan aturan yang berbeda di lingkungan yang berbeda, resolusi modul memecahkan perbedaan ini). Jika Anda menggunakan path.resolve, kamu butuh memerlukan itu jalan Modul simpul di bagian atas webpack.config.js mengajukan.

3. Tambahkan pemuat

Untuk tambahkan loader, Anda perlu mendefinisikan modul milik. Di bawah, kami menambahkan babel-loader yang memungkinkan Anda untuk aman menggunakan fitur ECMAScript 6 dalam file JS Anda:

 const path = butuhkan ("path"); module.exports = entry: "./src/script.js", output: nama file: "bundle.js", path: path.resolve (__ dirname, 'dist'), modul: rules: [test : /\.js$/, kecualikan: / (node_modules | bower_components) /, gunakan: loader: "babel-loader", opsi: preset: ["env"];

Konfigurasi mungkin tampak sulit tetapi hanya disalin dari Dokumentasi Babel loader. Sebagian besar loader memiliki file readme atau dokumentasi, sehingga Anda (hampir) selalu tahu cara mengonfigurasinya dengan benar. Dan, dokumen Webpack juga memiliki halaman yang menjelaskan cara mengkonfigurasi module.rules.

Anda dapat menambahkan banyak loader yang Anda butuhkan, ini daftar lengkapnya. Perhatikan bahwa Anda juga perlu melakukannya instal setiap loader dengan npm untuk membuatnya bekerja. Untuk Babel loader, Anda perlu menginstal paket Node yang diperlukan dengan npm:

 npm install --save-dev babel-loader babel-core babel-preset-env webpack

Jika Anda telah melihat package.json file, Anda akan melihat npm itu menambahkan tiga paket terkait Babel ke ketergantungan milik, ini akan menangani kompilasi ES6.

4. Tambahkan plugin

Untuk tambahkan plugin, Anda perlu menentukan plugin milik. Plus, Anda juga harus memerlukan plugin satu per satu, karena mereka adalah modul eksternal.

Dalam contoh kami, kami menambahkan dua plugin Webpack: the Plugin HTML Webpack dan Preload plugin Webpack. Webpack memiliki ekosistem plugin yang bagus, Anda dapat menelusuri daftar lengkapnya di sini.

Untuk membutuhkan plugin sebagai modul Node, buat dua konstanta baru: HtmlWebpackPlugin dan PreloadWebpackPlugin dan menggunakan memerlukan() fungsi.

 const path = butuhkan ("path"); const HtmlWebpackPlugin = membutuhkan ("html-webpack-plugin"); const PreloadWebpackPlugin = membutuhkan ("preload-webpack-plugin"); module.exports = entry: "./src/script.js", output: nama file: "bundle.js", path: path.resolve (__ dirname, 'dist'), modul: rules: [test : /\.js$/, tidak termasuk: / (node_modules | bower_components) /, gunakan: loader: "babel-loader", opsi: preset: ["env"], plugin: [new HtmlWebpackPlugin (), PreloadWebpackPlugin ()] baru;

Sama seperti dalam hal loader, Anda juga harus instal plugin Webpack dengan npm. Untuk menginstal dua plugin dalam contoh, jalankan dua perintah berikut di baris perintah Anda:

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

Jika Anda memeriksa package.json file sekarang, Anda akan melihat npm itu menambahkan dua plugin ke ketergantungan milik.

Jalankan Webpack

Untuk buat pohon ketergantungan dan output bundel, jalankan perintah berikut di baris perintah:

 paket web

Itu biasanya membutuhkan satu atau dua menit untuk Webpack untuk membangun proyek. Setelah selesai, Anda akan melihat pesan serupa di CLI Anda:

Jika semuanya berjalan dengan benar Webpack dibuat a dist map di root proyek Anda dan menempatkan dua file yang dibundel (bundle.js dan index.html) Didalam itu.

Github repo

Jika Anda ingin memeriksa, mengunduh, atau mem-fork seluruh proyek, lihat repo Github kami.