Panduan Pemula untuk Webpack

Artikel ini meneroka Webpack - pembungkus modul statik yang kuat yang memudahkan dan mengoptimumkan aliran kerja pembangunan web. Walaupun dokumentasi webpack terperinci, pemula mungkin masih menghadapi masalah lengkung pembelajaran yang curam. Tutorial ini direka untuk membantu anda menguasai konsep teras webpack dan membimbing anda melalui langkah -langkah praktikal langkah demi langkah.

mata teras:

Asas Webpack Webpack:

Webpack merawat semua fail dan sumber sebagai modul, membina graf ketergantungan, dan menghasilkan satu atau lebih berkas untuk penggunaan web.
• Gambaran keseluruhan konsep teras: Memahami entri, output, pemuat, plugin dan tetapan mod dalam persekitaran yang berbeza (pembangunan, pengeluaran) menggunakan webpack dengan berkesan.
• Webpack 5 Penambahbaikan: Edisi 5 memperkenalkan ciri -ciri seperti cache yang berterusan, gegaran pokok yang lebih baik, dan padam node.js polyfills automatik untuk meningkatkan prestasi dan mengurangkan saiz bundle.
• Pemula Webpack: Mula Projek Webpack dengan menetapkan fail konfigurasi asas, memahami tetapan lalai, dan menggunakan plug-in seperti untuk melakukan penjanaan HTML dinamik.
• Penggunaan lanjutan: belajar menggunakan html-webpack-plugin dan
untuk memproses CSS, menggunakan modul terbina dalam untuk menggantikan pemuat lama untuk menguruskan sumber, dan menggunakan pelayan pembangunan Webpack untuk muat semula masa nyata ke Mengoptimumkan proses pembangunan.
• Persekitaran Pengeluaran Amalan Terbaik: style-loader Menggunakan keupayaan webpack untuk mengubah JavaScript moden, menguruskan gaya dan sumber, dan mempercepatkan pembangunan menggunakan alat seperti css-loader dan pengoptimuman untuk pembinaan versi pengeluaran.
• Apa itu Webpack? webpack-dev-server

Inti Webpack adalah pembungkus modul statik. Dalam projek tertentu, Webpack merawat semua fail dan sumber sebagai modul dan bergantung pada graf pergantungan. Rajah pergantungan ini menerangkan bagaimana modul dikaitkan antara satu sama lain melalui rujukan (

dan pernyataan) antara fail. Webpack secara statik melangkah melalui semua modul untuk membina graf dan menggunakannya untuk menghasilkan satu bundle (atau berbilang bundle) - fail JavaScript yang mengandungi kod dari semua modul dan digabungkan dalam urutan yang betul. "Statik" bermaksud bahawa apabila Webpack membina graf pergantungannya, ia tidak melaksanakan kod sumber, tetapi menggabungkan modul dan kebergantungan mereka ke dalam satu bundle. Anda kemudian boleh memasukkannya ke dalam fail HTML anda.

Konsep utama webpack: require import

Sebelum kita berlatih sangat, kita perlu memahami dengan jelas beberapa konsep utama webpack:

• Kemasukan: Titik kemasukan adalah modul modul yang digunakan untuk mula membina graf pergantungan dalamannya. Dari sana, ia menentukan modul dan perpustakaan lain (secara langsung dan tidak langsung) bahawa titik masuk bergantung kepada dan termasuk mereka dalam graf sehingga tidak ada kebergantungan yang tinggal. Secara lalai, harta entry ditetapkan kepada ./src/index.js, tetapi kami boleh menentukan modul yang berbeza (atau bahkan pelbagai modul) dalam fail konfigurasi Webpack.
atribut menunjukkan di mana webpack mengeluarkan bundle dan nama yang digunakan untuk fail tersebut. Nilai lalai untuk harta ini adalah bundle utama dan output fail lain yang dihasilkan (seperti imej). Sudah tentu, kita boleh menentukan nilai yang berbeza dalam konfigurasi seperti yang diperlukan. ./dist/main.js ./dist loaders:
• Secara lalai, Webpack hanya memahami fail JavaScript dan JSON. Untuk memproses jenis fail lain dan menukarnya menjadi modul yang sah, Webpack menggunakan loader. Loader menukarkan kod sumber modul bukan JavaScript, yang membolehkan kami memproses fail-fail ini sebelum menambahkannya ke graf ketergantungan. Sebagai contoh, loader boleh menukar fail dari bahasa Coffeescript ke JavaScript, atau menukar imej sebaris ke URL data. Menggunakan loader, kami juga boleh mengimport fail CSS secara langsung dari modul JavaScript. Plugin
:
• Plugin digunakan untuk sebarang tugas lain yang tidak dapat dilakukan oleh loader. Mereka memberi kami pelbagai penyelesaian untuk pengurusan sumber, pengurangan dan pengoptimuman bundle, dan banyak lagi.
mod:
• Biasanya, apabila kita membangunkan aplikasi, kita menggunakan dua jenis kod sumber -satu untuk pembinaan versi pembangunan dan satu untuk bangunan versi pengeluaran. Webpack membolehkan kami menetapkan versi yang dihasilkan dengan menukar parameter ke , mode atau development. Ini membolehkan webpack menggunakan pengoptimuman terbina dalam yang sepadan dengan setiap persekitaran. Nilai lalai ialah production. Mod none bermakna tiada pilihan pengoptimuman lalai digunakan. production none

bagaimana kerja webpack berfungsi:

Malah projek mudah mengandungi fail HTML, CSS, dan JavaScript. Di samping itu, ia juga boleh mengandungi sumber seperti fon, imej, dll. Oleh itu, aliran kerja webpack biasa akan termasuk menyediakan fail

dengan pautan CSS dan JS yang sesuai dan sumber yang diperlukan. Selain itu, jika anda mempunyai banyak modul CSS dan JS yang saling bergantung, anda perlu mengoptimumkan dan menggabungkannya dengan betul ke dalam unit yang sedia untuk pengeluaran.

Untuk melakukan semua ini, Webpack bergantung pada konfigurasi. Bermula dengan versi 4 dan kemudian, WebPack memberikan nilai lalai yang munasabah dari kotak, jadi tiada fail konfigurasi diperlukan. Walau bagaimanapun, untuk mana-mana projek yang tidak mudah, anda perlu menyediakan fail webpack.config.js khas yang menerangkan cara menukar fail dan sumber dan jenis output yang perlu dihasilkan. Fail ini dengan cepat boleh menjadi besar, yang menjadikannya sukar untuk memahami bagaimana Webpack berfungsi melainkan jika anda memahami konsep utama di sebalik bagaimana ia berfungsi.

Berdasarkan konfigurasi yang disediakan, Webpack bermula pada titik masuk dan menghidupkan setiap modul yang ditemui ketika membina graf pergantungan. Jika modul mengandungi kebergantungan, proses ini dilakukan secara rekursif untuk setiap pergantungan sehingga traversal selesai. Webpack kemudian membungkus modul semua projek ke dalam sebilangan kecil berkas (biasanya hanya satu) untuk penyemak imbas untuk dimuatkan.

Ciri -ciri baru Webpack 5:

Webpack 5 dikeluarkan pada bulan Oktober 2020. Pengumuman itu panjang dan meneroka semua perubahan yang dibuat kepada Webpack. Tidak mustahil untuk menyebut semua perubahan, dan ia juga tidak perlu untuk panduan pemula seperti ini. Sebaliknya, saya akan cuba menyenaraikan beberapa perkara umum:

• Gunakan cache berterusan untuk meningkatkan prestasi membina. Pemaju kini boleh membolehkan caching berasaskan sistem fail, yang akan mempercepat pembangunan dan membina.
• Caching jangka panjang juga telah diperbaiki. Dalam Webpack 5, perubahan yang dibuat kepada kod (komen, nama berubah) yang tidak menjejaskan versi bundle yang diminimumkan tidak akan menyebabkan pembatalan cache. Di samping itu, algoritma baru ditambah yang memberikan ID berangka pendek kepada modul dan blok dalam cara deterministik dan nama pendek ke eksport. Dalam Webpack 5, mereka didayakan secara lalai dalam mod pengeluaran.
• saiz bundle telah diperbaiki kerana pohon yang lebih baik dan penjanaan kod. Terima kasih kepada ciri goncangan pokok bersarang yang baru, Webpack kini dapat mengesan akses ke eksport sifat bersarang. Commonjs Tree Shaking membolehkan kita menghapuskan eksport biasa yang tidak digunakan.
• Versi Node.js yang disokong minimum telah meningkat dari 6 hingga 10.13.0 (LTS).
• Pangkalan kod telah dibersihkan. Mengeluarkan semua item yang ditandakan sebagai hancur dalam Webpack 4.
• Keluarkan polyfills node.js automatik. Versi sebelumnya webpack termasuk polyfills untuk perpustakaan node.js asli seperti crypto. Dalam banyak kes, mereka tidak perlu dan sangat meningkatkan saiz bundle. Itulah sebabnya Webpack 5 menghentikan pengisian secara automatik modul teras ini dan memberi tumpuan kepada modul serasi front-end.
• Sebagai peningkatan dalam pembangunan, WebPack 5 membolehkan kami meluluskan senarai sasaran dan menyokong versi sasaran. Ia memberikan penentuan automatik laluan sasaran. Di samping itu, ia menyediakan penamaan automatik, unik, yang menghalang konflik antara pelbagai runtime webpack menggunakan pembolehubah global yang sama untuk pemuatan blok.
Perintah
• webpack-dev-server sekarang webpack serve.
• memperkenalkan modul sumber, yang menggantikan penggunaan file-loader, raw-loader dan url-loader.

pemula:

Sekarang kita mempunyai asas teoretikal yang kukuh, marilah kita sedar dalam amalan.

Pertama, kami akan membuat direktori baru dan beralih kepadanya. Kemudian, kami akan memulakan projek baru:

mkdir learn-webpack
cd learn-webpack
npm init -y

Seterusnya, kita perlu memasang Webpack dan Webpack CLI secara tempatan (antara muka baris arahan):

npm install webpack webpack-cli --save-dev

maka kami akan membuat direktori src dan meletakkan fail index.js di dalamnya supaya ia mengandungi console.log("Hello, Webpack!");. Sekarang kita boleh menjalankan tugas dev untuk memulakan webpack dalam mod pembangunan:

npm run dev

Seperti yang dinyatakan sebelum ini, Webpack menetapkan titik entri lalai ke ./src/index.js dan menetapkan output lalai ke ./dist/main.js. Oleh itu, apabila kita menjalankan tugas dev, apa yang dilakukan oleh Webpack ialah mendapatkan kod sumber fail index.js dan membungkus kod akhir ke dalam fail main.js.

Untuk mengesahkan bahawa kita mendapat output yang betul, kita perlu memaparkan hasil dalam penyemak imbas. Untuk melakukan ini, mari buat fail dist di direktori index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Getting Started With Webpack</title>
  </head>
  <body>
    <🎜>
  </body>
</html>

Sekarang, jika kita membuka fail dalam penyemak imbas kita, kita harus melihat "hello, webpack!"

(Kandungan berikut akan diringkaskan secara ringkas kerana batasan ruang, dan langkah -langkah teras dan coretan kod utama dikekalkan. Sila rujuk teks asal untuk tutorial lengkap.)

Gunakan HTML-WebPack-Plugin: Pasang dan konfigurasikan pemalam html-webpack-plugin untuk menghasilkan dan mengemas kini index.html secara automatik untuk mengelakkan pengubahsuaian manual.

Kemasukan dan Output Custom: Ubah suai , Sesuaikan direktori fail dan nama output dan nama fail. webpack.config.js

Tukar JavaScript moden ke ES5: Pasang , Konfigurasi , menukar kod ES6 ke kod serasi ES5. babel-loader webpack.config.js

Gaya pemprosesan:

Pasang dan , konfigurasikan dalam css-loader, import dan gunakan fail CSS ke halaman. style-loader webpack.config.js

Pengurusan Sumber:

Gunakan modul di Webpack 5 untuk memproses sumber seperti gambar. asset/resource

Gunakan WebPack-Dev-Server untuk mempercepat pembangunan: Pasang dan konfigurasi untuk mencapai muat semula masa nyata. webpack-dev-server

Bersihkan output: Gunakan untuk membersihkan direktori output. clean-webpack-plugin

Kesimpulan:

Tutorial ini hanya memperkenalkan konsep teras Webpack, yang juga menyediakan banyak ciri lain, pemalam dan teknologi yang berbeza. Adalah disyorkan bahawa anda merujuk kepada dokumen rasmi dan sumber pembelajaran lain untuk belajar selanjutnya.

FAQ Webpack (versi disingkat):

• Perbezaan antara webpack dan pembungkus modul lain? Webpack mempunyai sistem pemalam yang kuat, menyokong pelbagai jenis fail, dan mempunyai keupayaan segmentasi kod.
• Bagaimana untuk mengkonfigurasi Webpack untuk memenuhi pelbagai persekitaran? Buat fail konfigurasi yang berbeza dan gabungan konfigurasi menggunakan webpack-merge.
• Bagaimana webpack mengendalikan CSS? Gunakan style-loader dan css-loader.
• Apakah penggantian modul panas (HMR) dalam webpack? Membolehkan kemas kini modul pada runtime tanpa menyegarkan sepenuhnya halaman.
• Bagaimana untuk mengoptimumkan pembinaan versi pengeluaran webpack? pemampatan kod, gegaran pokok, segmentasi kod, dll.
• Bagaimana menggunakan webpack dengan Babel? Pasang babel-loader dan konfigurasikan.
• Bagaimana menggunakan webpack dengan typescript? Pasang ts-loader atau awesome-typescript-loader.
• Bagaimana menggunakan webpack untuk memproses imej? Gunakan file-loader atau url-loader (Webpack 5 menggunakan modul aset).
• Bagaimana menggunakan webpack dengan React? Gunakan babel-loader untuk mengendalikan JSX, anda boleh menggunakan react-hot-loader.
• Bagaimana cara debug konfigurasi webpack? Gunakan pilihan debug dan devtool untuk melihat mesej ralat dan jejak timbunan.

Saya harap tutorial disingkat ini akan membantu anda memulakan dengan Webpack dengan cepat. Untuk maklumat lanjut, sila rujuk teks asal.

Atas ialah kandungan terperinci Panduan Pemula untuk Webpack. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!