Pelajari lebih lanjut tentang alat pengemasan modul webpack

1. Apa itu webpack

1. Penjelasan resmi

Intinya, webpack adalah alat pengemasan modular statis untuk aplikasi JavaScript saat ini. (Kalimat ini dapat diringkas dari dua poin: modul dan kemasan )

Mari kita bahas tentang konsep modul dan pengemasan !

2. Modularisasi front-end

• Beberapa solusi untuk modularisasi front-end: AMD, CMD, CommonJS, ES6 (browser tidak dapat mengenalinya , tetapi webpack dapat menjadi dukungan mendasar sebelum pengembangan modular dapat dilakukan)
• Sebelum ES6 , jika Anda ingin melakukan modularisasi Pengembangan memerlukan bantuan alat lain agar kita dapat melakukan pengembangan modular.
Setelah menyelesaikan proyek melalui pengembangan modular, kita juga perlu menangani berbagai ketergantungan antar modul dan
• mengintegrasikan
• serta mengemasnya
• intinya adalah memungkinkan kita melakukan pengembangan modular dan membantu kita menangani ketergantungan antar modul.
• Bukan hanya file JavaScript , CSS , gambar , file json , dll. semuanya dapat digunakan sebagai modul di webpack.

3. Bagaimana memahami kemasan?

• Webpack dapat membantu kita memodulasi dan menangani berbagai hubungan kompleks antar modul . Konsep pengemasannya mudah dipahami.
• Ini untuk mengemas dan menggabungkan berbagai modul sumber daya di webpack menjadi beberapa paket (Bundle).
• Selama proses pengemasan, sumber daya juga dapat diproses , seperti mengompresi gambar, mengubah scss menjadi css, dan mengubah sintaks ES6 ke ES5, mengubah TypeScript ke JavaScript dan operasi lainnya.
• Alat pengemasan termasuk grunt/gulp.

Perbandingan antara webpack dan grunt/gulp.

• Inti dari grunt/gulp adalah Task.
  1. Anda dapat mengonfigurasi serangkaian tugas dan menentukan transaksi yang akan diproses oleh tugas tersebut (seperti ES6, konversi ts, kompresi gambar, konversi scss ke css)
  2. Kemudian biarkan grunt/gulp menjalankan tugas ini secara berurutan, dan otomatiskan seluruh proses

• untuk melihat tugas gulp.
  1. Tugas berikut adalah mengonversi semua file js di bawah src menjadi sintaks ES5.
  2. Dan terakhir output ke folder dist.
  

• Kapan menggunakan grunt/gulp?
  1. Ketergantungan modul proyek sangat sederhana, dan konsep modularisasi bahkan tidak digunakan.
  2. Cukup gunakan grunt/gulp untuk penggabungan dan kompresi sederhana.
  3. Jika keseluruhan proyek menggunakan manajemen modular dan saling ketergantungan sangat kuat, kita dapat menggunakan webpack.

• Apa perbedaan antara mendengus/meneguk dan webpack?
  1. grunt/gulp lebih menekankan pada otomatisasi proses front-end, dan modularisasi bukanlah intinya.
  2. Webpack lebih menekankan pada manajemen pengembangan modular , dan fungsi seperti kompresi file, penggabungan, dan pemrosesan awal adalah fungsi yang disertakan.

2. Instalasi webpack

( wepack harus bergantung pada lingkungan node untuk operasi normal, dan lingkungan node harus diperlukan untuk eksekusi normal. Gunakan alat npm untuk mengelola berbagai paket dependen di node)

• Oleh karena itu, untuk menginstal webpack, Anda harus menginstal Node.js terlebih dahulu. Node.js dilengkapi dengan alat manajemen paket npm
• untuk menginstal webpack secara global (npm install webpack@ 3.6.0 -g) dan
• untuk menginstal webpck secara lokal (npm install [email protected] --save-dev) –save-dev adalah ketergantungan pengembangan dan tidak perlu digunakan setelah proyek dikemas.

3. Konfigurasi webpack

1. Analisis file dan folder

• folder dist: digunakan untuk menyimpan file yang dikemas kemudian
• folder src: digunakan untuk menyimpan file sumber yang kita tulis
  main.js : File entri proyek.
  mathUtils.js : Mendefinisikan beberapa fungsi alat matematika yang dapat direferensikan dan digunakan di tempat lain.
  index.html : Browser membuka html beranda yang ditampilkan (direferensikan di sini adalah konten file paket terakhir di src, yaitu folder dist ).
  package.json : dihasilkan melalui npm init, file yang dikelola oleh paket npm.

Berikut kode pada file mathUtils.js dan file main.js : (Spesifikasi modularisasi CommonJS, CommonJS adalah standar modularisasi, nodejs adalah implementasi dari CommodJS (modularisasi))

2. Perintah

webpack ./src/main.js ./dist/bundle.js (kemas file main.js menjadi file bundle.js)

Deskripsi: Dengan cara yang sama, Anda juga dapat menggunakan spesifikasi modular ES6

3. Buat file webpack.config.js untuk menyederhanakan perintah pengemasan

(petakan perintah pengemasan ke entri pengemasan dan keluar

Kode dalam file ini:

entri: Untuk keluaran entri yang dikemas

: Kita perlu mendapatkan jalur dalam

• keluaran keluar yang dikemas secara dinamis,
• sehingga kita dapat menggunakan sintaks Node.js untuk mengimpor modul. Modul ini adalah file dalam tanda kutip jalur (const path = require ('jalur') Perlu ditemukan dalam paket node)
• Gunakan node.js melalui perintah npm init (inisialisasi)
• untuk menghasilkan file package.json (file ini menjelaskan informasi proyek saat ini) lisensi: "ISC" (open source untuk proyek), berikut

deskripsi kode package.json: Jika ingin menggunakan node, Anda harus mengandalkan file package.json

Setelah menjalankan npm install [email protected] --save-dev , dependensi ditambahkan sebagai berikut

4. Memetakan perintah webpack ke npm run

Selain memetakan webpack ke pintu masuk dan keluar , Anda juga dapat memetakan perintah webpack ke npm run untuk beberapa operasi (perlu dimodifikasi dalam tag skrip **"script"** dalam paket. json). .

4. Kegunaan loader

1. Apa itu loader?

• Loader adalah konsep inti dalam webpack.

Sekarang mari kita pikirkan untuk apa webpack digunakan?

• Kami terutama menggunakan webpack untuk memproses kode js, dan webpack akan secara otomatis menangani dependensi yang terkait dengan js
• . Namun, selama pengembangan, tidak hanya diproses oleh kode js dasar, tetapi juga perlu memuat css, gambar, dan beberapa kode lanjutan ke. mengonversi ES6 ke ES5, mengonversi TypeScript menjadi kode ES5, mengonversi scss dan yang lebih kecil menjadi css, mengonversi file .jsx, .vue menjadi file js, dll.
• Untuk kemampuan webpack itu sendiri, transformasi ini tidak didukung.
• Saat ini, cukup perluas loader yang sesuai ke webpack.

2. Proses penggunaan loader

1)

Pekerjaan persiapan untuk pemrosesan file css:

1. Di direktori src, buat file css. , buat file normal.css di dalamnya

2. Atur ulang struktur direktori file dan letakkan file js yang tersebar di folder js

3. Kode di normal.css sangat sederhana, yaitu atur body menjadi merah

4. Namun gaya di normal.css tidak akan berlaku saat ini, karena tidak direferensikan, dan webpack tidak dapat menemukannya, karena kita hanya memiliki satu entri, dan webpack akan mencari file dependen lainnya mulai dari entri tersebut.

5. Saat ini kita harus mereferensikannya di main.js, file entri

Setelah itu kita perlu mengimpor loader yang sesuai untuk digunakan!

• Langkah 1 : Instal loader yang perlu Anda gunakan melalui npm
  (npm install --save-dev css-loader) (npm install --save-dev style-loader)
  Di situs resmi webpack, temukan metode penggunaan loader untuk gaya berikut:
  
  

• Langkah 2 : Buat instruksi konfigurasi di bawah kata kunci modul di webpack.config.js

: css-loader hanya bertanggung jawab untuk memuat file css , dan tidak bertanggung jawab untuk menyematkan gaya css tertentu ke dalam dokumen

. loader membantu kami memproses

Catatan: style-loader harus ditempatkan di depan css-loader.

2) Pemrosesan file lebih sedikit

• langkah 1 : Instal pemuat yang sesuai (catatan: less juga diinstal di sini, karena webpack akan menggunakan less untuk mengkompilasi file yang lebih sedikit). Perintah: npm install --save-dev less-loader less

• Langkah 2 : Ubah file konfigurasi yang sesuai (di webpack.config.js) dan tambahkan opsi aturan untuk memproses file .less. sebagai berikut:

3) Pemrosesan file gambar

• langkah 1 : Tambahkan dua gambar ke proyek (satu kurang dari 8kb, yang lain lebih besar dari 8kb)

• langkah 2 : pertama pertimbangkan untuk mereferensikan gambar dalam gaya css, sebagai berikut

  

• Langkah 3 : Ubah file konfigurasi yang sesuai (di webpack.config.js) dan tambahkan opsi aturan untuk memproses file gambar. sebagai berikut:

  

• Langkah 4 : Kesalahan ditemukan setelah pengemasan, karena gambar yang lebih besar dari 8kb akan diproses melalui file-loader , tetapi tidak ada file-loader di proyek kami. (Anda perlu menginstal file-loader , perintah npm install --save-dev file-loader). Setelah instalasi dan pengemasan, Anda akan menemukan ada file gambar tambahan di folder dist.

  

Deskripsi:

• Menemukan bahwa webpack secara otomatis menghasilkan nama yang sangat panjang untuk kami

  1. Ini adalah nilai hash 32-bit untuk mencegah duplikasi nama.
  2. Namun, dalam pengembangan sebenarnya, mungkin ada persyaratan tertentu untuk nama gambar yang dikemas

• . Oleh karena itu, kita dapat menambahkan opsi berikut dalam opsi:

  1.img: folder tempat file akan dikemas.
  2. nama: Dapatkan nama asli gambar tersebut dan letakkan di lokasi ini
  3. Hash8: Untuk mencegah konflik nama gambar, hash tetap digunakan, tetapi hanya 8 bit yang dipertahankan.
  4. ext : Gunakan ekstensi asli gambar sebagai berikut:
  

• Anda juga perlu mengonfigurasi dan memodifikasi jalur yang digunakan oleh gambar nanti

  1. Secara default, webpack akan mengembalikan jalur yang dihasilkan ke pengguna.
  2. Namun, seluruh program dikemas dalam folder dist, jadi di sini Anda perlu menambahkan dist/ lain ke jalurnya.
  sebagai berikut:
  

Ringkasnya, setelah dikemas, file gambarnya terlihat seperti ini

4), ES6 hingga ES5 babel

5. Konfigurasikan Vue di webpack

• Langkah 1: Perintah eksekusi terminal (npm install --save vue)

• Langkah 2: Impor Vue di main.js (impor Vue dari 'vue') sebagai berikut

• Langkah 3: Tunggu p pada instance vue di index.html, sebagai berikut

• Langkah 4: Kesalahan ditemukan setelah pengemasan. Kita perlu menentukan bahwa vue yang kita gunakan adalah versi runtime-compiler .

Operasi spesifik: Anda perlu menambahkan tekad ke webpack dan mengambil alias ( alias ), sebagai berikut:

6. Penggunaan Vue di webpack

Langkah 1: Tunggu p pada instance vue di index.html

Langkah 2: Impor komponen APP ke file main.js , daftarkan APP di instance Vue , dan gunakan komponen APP di template Vue ( komponenisasi )

Langkah 3: Buat file APP.vue dan pisahkan template halaman vue dari kode js dan kode css , seperti berikut

Langkah 4: Konfigurasikan pemuat vue yang sesuai,

Ubah file konfigurasi webpack.config.js:

7. Penggunaan plugin

1. Memahami plugin

• Apa itu plugin?
  1. Plugin artinya plug-in, yang biasanya digunakan untuk memperluas arsitektur yang sudah ada.
  2. Plug-in di webpack adalah berbagai ekstensi dari fungsi webpack yang ada, seperti optimasi pengemasan, kompresi file, dll.
• Perbedaan antara loader dan plugin
  1. Loader terutama digunakan untuk mengkonversi jenis modul tertentu
  2. Plugin adalah plug-in yang merupakan perpanjangan dari webpack itu sendiri dan
• proses penggunaan plugin extender.
  1. Langkah 1: Instalasi melalui npm memerlukan penggunaan plugin (beberapa plugin yang sudah ada di webpack tidak perlu diinstal)
  2. Langkah 2: Konfigurasikan plugin plug-in di webpack.config.js

2. Webpack-Tambahkan informasi hak cipta Penggunaan plugin

3. Paket plugin html

4. Plugin kompresi js

8. Bangun server lokal

• . Webpack menyediakan server pengembangan lokal opsional. Server lokal ini dibangun berdasarkan node.js dan menggunakan kerangka kerja ekspres secara internal. Server ini dapat mencapai apa yang kita inginkan dengan mengizinkan browser untuk secara otomatis menyegarkan dan menampilkan hasil yang dimodifikasi .

• Namun, ini adalah modul terpisah. Anda perlu menginstalnya sebelum menggunakannya di webpck. Perintah: (npm install --save-dev [email protected])

• devserver juga merupakan opsi di webpack dapat diatur sebagai properti berikut:
  1. contentBase: Folder mana yang menyediakan layanan lokal. Defaultnya adalah folder root. Kita perlu mengisi ./dist di sini.
  2. port: nomor port
  3. inline: penyegaran halaman secara real time
  4. historyApiFallback: Di halaman SPA,

• konfigurasi file webpack.config.js mode riwayat yang mengandalkan HTML5 dimodifikasi sebagai berikut:
  

• Parameter –open berarti membuka browser secara langsung

Selain itu,

di bawah ini kami ingin memisahkan file konfigurasi webpack: yaitu memisahkan hal-hal yang diperlukan untuk pengembangan dan hal-hal yang digunakan untuk penerbitan ( kompilasi ). sebagai berikut:

9. Vue CLI

1. Apa yang dimaksud dengan CLI?

• Ini adalah Antarmuka Baris Perintah, diterjemahkan sebagai antarmuka baris perintah, tetapi umumnya dikenal sebagai scaffolding.
• Vue CLI adalah scaffolding proyek vue.js yang dirilis secara resmi.
• Dengan menggunakan vue-cli, Anda dapat dengan cepat membangun lingkungan pengembangan Vue dan konfigurasi webpack yang

sesuai . Prasyarat untuk menggunakan Vue CLI - Node (Node perlu diinstal)

npm

harus terlibat.

• Nama lengkap NPM adalah Node Package Manager
• , yang merupakan alat manajemen dan distribusi paket NodeJS. Ini telah menjadi standar tidak resmi untuk menerbitkan modul (paket) Node
• . NPM sering digunakan untuk menginstal beberapa paket dependen selama proses pengembangan.

3. Gunakan Vue CLI untuk

• menginstal Vue scaffolding

npm install -g @vue/cli

Catatan: Versi yang diinstal di atas adalah versi Vue CLI3 Jika Anda ingin menginisialisasi proyek sesuai dengan metode Vue CLI2, tidak mungkin

• untuk melakukan inisialisasi proyek Vue CLI2

vue init webpack proyek saya