Bermula dengan Webpack [Dengan Contoh Contoh]

Webpack ialah modul pembawa yang memudahkan pembinaan aplikasi JavaScript kompleks. Ia telah mendapat daya tarikan yang serius sejak komuniti React memilihnya sebagai alat binaan utamanya. Webpack adalah bukan pengurus pakej atau pelari tugas kerana ia menggunakan pendekatan yang berbeza (lebih maju), tetapi matlamatnya juga menubuhkan proses membina dinamik.

Webpack berfungsi dengan JavaScript vanila. Anda boleh menggunakannya ikatkan aset statik permohonan, seperti imej, fon, stylesheets, skrip ke satu fail tunggal semasa menjaga semua ketergantungan.

Anda tidak perlu Webpack untuk membuat aplikasi atau laman web yang mudah, contohnya satu yang mempunyai hanya satu JavaScript dan satu fail CSS dan beberapa imej, namun ia boleh menjadi penyelamat untuk aplikasi yang lebih rumit dengan beberapa aset dan kebergantungan.

Webpack vs pelari tugas vs Pelintas

Jadi, bagaimana Webpack disusun berbanding alat binaan lain seperti Grunt, Gulp, atau Pelayaran?

Grunt dan Gulp adalah pelari tugas. Dalam fail konfigurasi mereka, anda tentukan tugas, dan pelari tugas melaksanakannya. The alur kerja pelari tugas pada asasnya kelihatan seperti ini:

Walau bagaimanapun, Webpack adalah a modul pembawa yang menganalisis keseluruhan projek, menubuhkan pokok pergantungan, dan membuat fail JavaScript dibundel bahawa ia berfungsi pada penyemak imbas.

Pelayaran adalah lebih dekat dengan Webpack daripada pelari tugas, kerana ia juga mewujudkan graf pergantungan tetapi ia hanya berlaku untuk modul JavaScript. Webpack melangkah satu langkah lebih jauh, dan bukan sekadar membekalkan kod sumber tetapi juga aset lain seperti imej, gaya, fon, dan lain-lain.

Sekiranya anda ingin mengetahui lebih lanjut bagaimana Webpack membandingkan dengan alat binaan lain, Saya cadangkan anda dua artikel:

Andrew Ray Webpack: Bila Digunakan dan Kenapa pada blognya sendiri
Cory House's Melayari vs Webpack pada freeCodeCamp (dengan ilustrasi hebat)

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

Empat konsep utama Webpack

Webpack mempunyai empat pilihan konfigurasi utama dipanggil “konsep teras” bahawa anda perlu menentukan dalam proses pembangunan:

Kemasukan - yang titik permulaan graf pergantungan (satu atau lebih fail JavaScript).
Pengeluaran - fail di mana anda mahu output untuk dibundel kepada (satu fail JavaScript).
Pemborong - transformasi ke atas aset yang menjadikannya modul Webpack supaya mereka boleh ditambah kepada graf pergantungan. Contohnya, pemuat css digunakan untuk mengimport fail CSS.
Plugin - tindakan dan fungsi tersuai dilakukan pada bundle. Sebagai contoh, i18n-webpack-plugin membenamkan penyetempatan ke dalam berkas.

Pembuat berfungsi pada setiap fail sebelum penyusunan berlaku. Plugin dilaksanakan pada kod yang dibundel, pada akhir proses penyusunan.

Pasang Webpack

Untuk pasang Webpack, buka barisan arahan, arahkan ke folder projek anda, dan jalankan arahan berikut:

 npm init

Jika anda tidak mahu melakukan konfigurasi itu sendiri, anda boleh membuat npm tinggalkan package.json fail dengan nilai lalai dengan arahan berikut:

 npm init -y

Seterusnya, pasang Webpack:

 npm pasang webpack --save-dev

Sekiranya anda menggunakan nilai lalai, ini adalah cara anda package.json fail sepatutnya kelihatan seperti sekarang (sifat boleh dalam susunan yang berbeza):

 "nama": "_tests", "version": "1.0.0", "description": "", "main": "webpack.config.js", "dependencies": "webpack": "^ 3.6 .0 "," devDependencies ": " webpack ":" ^ 3.6.0 "," scripts ": " test ":" echo \ "Error: no test specified \" && exit 1 " ": []," pengarang ":" "," lesen ":" ISC "

Buat fail konfigurasi

Anda perlu mencipta webpack.config.js fail dalam folder akar projek. Fail konfigurasi ini mempunyai peranan utama, kerana ini adalah di mana anda akan mentakrifkan empat konsep teras (titik kemasukan, output, pemuat, pemalam).

The webpack.config.js fail memegang objek konfigurasi yang mana sifat anda perlu ditentukan. Dalam artikel ini, kami akan menentukan empat sifat itu sesuai dengan empat konsep teras (kemasukan, pengeluaran, modul, dan pasangkan), tetapi objek konfigurasi mempunyai ciri-ciri lain juga.

1. Buat titik masuk (s)

Anda boleh mempunyai satu atau lebih tempat kemasukan. Anda perlu menentukan mereka dalam kemasukan harta.

Masukkan coretan kod berikut ke dalam webpack.config.js fail. Ia menentukan satu titik masuk:

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

Untuk menentukan lebih daripada satu titik masuk yang boleh anda gunakan sama ada susunan atau sintaks objek.

Dalam folder projek anda, buat yang baru src folder dan a script.js fail di dalamnya. Ini akan menjadi anda pintu masuk. Untuk tujuan ujian, hanya letakkan rentetan di dalamnya. Saya menggunakan yang berikut (namun, anda juga boleh menggunakan yang lebih menarik):

 salam uc = "Hai, saya adalah projek starter Webpack."; document.write (ucapan);

2. Tentukan output

Anda boleh mempunyai hanya satu fail output. Webpack membundel semua aset ke dalam fail ini. Anda perlu mengkonfigurasikannya pengeluaran harta dengan cara berikut:

 jalur laluan = menghendaki ("jalan"); module.exports = entry: "./src/script.js", output: filename: "bundle.js", path: path.resolve (__ dirname, 'dist');

The nama fail harta mentakrifkan nama fail dibundel, Sementara jalan harta menentukan nama direktori. Contoh di atas akan mencipta /dist/bundle.js fail.

Walaupun ia tidak wajib, lebih baik menggunakan path.resolve () kaedah apabila anda mentakrifkan jalan harta, kerana ia memastikan resolusi modul yang tepat (jalan mutlak output dibuat mengikut peraturan yang berlainan dalam persekitaran yang berbeza, resolusi modul menyelesaikan perbezaan ini). Jika anda menggunakannya path.resolve, anda perlu memerlukan yang jalan Modul nod di bahagian atas webpack.config.js fail.

3. Tambah pemuat

Untuk tambah pemuat, anda perlu menentukan modul harta. Di bawah, kami menambah babel-loader yang membolehkan anda selamat gunakan ciri ECMAScript 6 dalam fail JS anda:

 jalur laluan = menghendaki ("jalan"); module.exports = entry: "./src/script.js", output: filename: "bundle.js", path: path.resolve (__ dirname, 'dist'), modul: rules: [test : /\.js$/, tidak termasuk: / (node_modules | bower_components) /, gunakan: loader: "babel-loader", pilihan: preset: ["env"];

Konfigurasi ini mungkin kelihatan sukar tetapi ia hanya disalin dari Dokumentasi loader Babel. Kebanyakan pemuat datang dengan fail readme atau beberapa dokumentasi, jadi anda boleh (hampir) selalu tahu cara mengkonfigurasinya dengan betul. Dan, dokumen Webpack juga mempunyai halaman yang menjelaskan bagaimana untuk mengkonfigurasi modul.

Anda boleh menambah seperti banyak pemuat yang anda perlukan, inilah senarai penuh. Perhatikan bahawa anda juga perlu pasang setiap loader dengan npm untuk menjadikannya berfungsi. Untuk loader Babel, anda perlu memasang pakej Node yang diperlukan dengan npm:

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

Sekiranya anda melihat anda package.json fail, anda akan melihat npm itu menambah tiga pakej yang berkaitan dengan Babel kepada devDependencies harta, ini akan mengurus kompilasi ES6.

4. Tambah plugin

Untuk tambah plugin, anda perlu menentukan plugin harta. Plus, anda juga perlu memerlukan pemalam satu persatu, kerana ia adalah modul luaran.

Dalam contoh kami, kami menambah dua plugin Webpack: Plugin HTML Webpack dan juga Preload Webpack plugin. Webpack mempunyai a ekosistem plugin bagus, anda boleh melayari senarai penuh di sini.

Untuk menghendaki pemalam sebagai modul Nod, mewujudkan dua pemalar baru: HtmlWebpackPlugin dan PreloadWebpackPlugin dan menggunakan memerlukan() fungsi.

 jalur laluan = menghendaki ("jalan"); const HtmlWebpackPlugin = memerlukan ("html-webpack-plugin"); const PreloadWebpackPlugin = memerlukan ("preload-webpack-plugin"); module.exports = entry: "./src/script.js", output: filename: "bundle.js", path: path.resolve (__ dirname, 'dist'), modul: rules: [test : /\.js$/, tidak termasuk: / (node_modules | bower_components) /, gunakan: loader: "babel-loader", pilihan: preset: ["env"]], plugins: [new HtmlWebpackPlugin (), baru PreloadWebpackPlugin ()];

Sama seperti dalam hal pemuat, anda juga perlu memasang plugin Webpack dengan npm. Untuk memasang kedua-dua plugin dalam contoh, jalankan dua perintah berikut dalam baris arahan anda:

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

Sekiranya anda menyemak package.json fail sekarang, anda akan melihat npm itu menambah kedua-dua plugin kepada devDependencies harta.

Jalankan Webpack

Untuk mewujudkan pokok pergantungan dan keluarkan bungkusan, jalankan arahan berikut dalam baris arahan:

 webpack

Ia biasanya mengambil masa satu atau dua minit untuk Webpack untuk membina projek. Apabila selesai, anda akan melihat mesej yang serupa dalam CLI anda:

Jika semuanya berjalan dengan betul Webpack mencipta a dist folder dalam akar projek anda dan meletakkan kedua-dua fail yang dibundel (bundle.js dan index.htmldi dalamnya.

Repo github

Sekiranya anda ingin menyemak, memuat turun, atau menipu keseluruhan projek, lihat repo Github kami.