Konfigurasi entri konsep inti Webpack (entri)

Jika dependensi setiap modul dalam proyek dianggap sebagai pohon, maka entri adalah akar dari pohon dependensi.

Modul dependen ini akan dienkapsulasi menjadi sebuah potongan saat dikemas. Jadi apa itu potongan?

Chunk secara harfiah berarti blok kode, yang dalam Webpack dapat dipahami sebagai beberapa modul yang telah diabstraksi dan dikemas. Ini seperti tas file yang berisi banyak file. File di dalamnya masing-masing modul. Webpack menambahkan lapisan kemasan di bagian luar untuk membentuk sebuah potongan:

Bergantung pada konfigurasi spesifik, satu atau lebih potongan dapat dihasilkan ketika sebuah proyek dikemas.

Beberapa entri dapat ditentukan dalam proyek, dan setiap entri akan menghasilkan sumber daya hasil.

Misalnya, ada dua entri dalam proyek kami, src/index.js dan src/lib.js dist/index.js dan dist/lib.js

Dalam beberapa kasus khusus, satu entri dapat menghasilkan beberapa potongan dan pada akhirnya beberapa

entri bundel.

Parameter:

• Entri entri adalah pintu masuk ke modul konfigurasi , yang dapat diabstraksi menjadi masukan. Langkah pertama dalam eksekusi build Webpack adalah mencari dan menguraikan secara rekursif semua modul yang bergantung pada
• entri diisi, Webpack akan Melaporkan kesalahan dan keluar dari

module.exports = {
	entri:'./src/index.js', //Menunjukkan file entri, yaitu memasukkan proyek kita dari index.js};

①Contoh tipe entri

Jika itu adalah tipe array, bila digunakan dengan output. item konfigurasi perpustakaan, hanya yang terakhir dalam array Modul file entri akan diekspor

② Nama potongan

Webpack akan memberi nama untuk setiap Potongan yang dihasilkan. Nama Potongan terkait dengan konfigurasi Entri:

• jika entri adalah string atau array, hanya satu Chunk yang akan dihasilkan. Saat ini, nama Chunk adalah yang utama;
• jika entri adalah sebuah objek, beberapa Chunk dapat muncul kunci dalam pasangan nilai kunci objek.

③Entri dinamika konfigurasi.

Jika ada beberapa halaman dalam proyek, Anda perlu mengkonfigurasi entri untuk setiap halaman akan dipengaruhi oleh faktor lain dan tidak dapat ditulis sebagai nilai statis. Solusinya adalah dengan mengatur Entry ke dalam suatu fungsi untuk mengembalikan konfigurasi yang disebutkan di atas secara dinamis. Kodenya adalah sebagai berikut:

// Entri fungsi sinkron: () => {.
  kembali {
    a:'./halaman/a',
    b:'./halaman/b',
  }
};
// Entri fungsi asinkron: () => {
  kembalikan Janji baru((putuskan)=>{
    menyelesaikan({
       a:'./halaman/a',
       b:'./halaman/b',
    });
  });
};

Parameter: konteks

Webpack akan menggunakan konteks sebagai direktori root ketika mencari file dengan jalur relatif . Konteks default ke direktori kerja saat ini di mana Webpack dimulai. Jika Anda ingin mengubah konfigurasi default konteks, Anda dapat mengaturnya seperti ini di file konfigurasi:

module.exports = {
	konteks: path.resolve(__dirname, 'app')
}

Perhatikan bahwa konteks harus berupa string jalur absolut.

konfigurasi file entri tunggal

dengan membawa parameter webpack --context saat memulai Webpack.

Penggunaan: entry:string|Array<string>

1. Sintaks yang disingkat

webpack.config.js

//Karena bersifat tunggal, maka dapat disingkat menjadi:
modul.ekspor = {
  entri: './main.js'
};

Konfigurasi entri di atas sebenarnya ditulis sebagai singkatan berikut

module.exports = {
  pintu masuk: {
    utama: './main.js'
  }
};

2. Sintaks array

module.exports = {
  pintu masuk: {
    utama:['./main.js','./main2.js']
  }
};

Fungsi meneruskan array adalah untuk menggabungkan beberapa sumber daya terlebih dahulu. Saat mengemas, Webpack akan menggunakan elemen terakhir dalam array sebagai jalur entri sebenarnya.

Saat menggunakan string atau array untuk mendefinisikan satu entri, tidak ada cara mengubah nama potongan, hanya bisa menjadi "utama" default.

Konfigurasi file beberapa entri

Penggunaan: entry: {[entryChunkName: string]: string|Array}

Sintaks objek

module.exports = {
  pintu masuk: {
    aplikasi: './src/app.js',
    vendor: './src/vendors.js'
  }
};

Ini akan lebih rumit. Namun ini adalah cara yang paling diperluas untuk menentukan titik masuk dalam suatu aplikasi.

"Konfigurasi webpack yang dapat diperluas" : dapat digunakan kembali dan dapat digabungkan dengan konfigurasi lainnya. Ini adalah teknik populer untuk memisahkan masalah dari lingkungan, target pembangunan, dan waktu proses. Kemudian gabungkan mereka menggunakan alat khusus seperti penggabungan webpack.

Skenario aplikasi

1. Aplikasi satu halaman

, baik itu kerangka kerja, pustaka, atau modul di setiap halaman, direferensikan oleh satu titik masuk app.js Keuntungannya adalah hanya satu file JS yang akan dihasilkan dan ketergantungannya akan jelas .

modul.ekspor = {
  entri: './src/app.js'
};

Pendekatan ini juga memiliki kelemahan, yaitu semua modul dikemas bersama. Ketika skala aplikasi meningkat ke tingkat tertentu, volume sumber daya yang dihasilkan akan terlalu besar, yang akan mengurangi kecepatan rendering halaman

pengguna konfigurasi Webpack, jika bundel lebih besar dari Pada 250kB (sebelum kompresi), bundel akan dianggap terlalu besar, dan peringatan akan muncul selama pengemasan, seperti yang ditunjukkan pada gambar:

2. Pisahkan perpustakaan pihak ketiga (vendor).

Untuk mengatasi masalah di atas, Anda dapat mengekstrak perpustakaan pihak ketiga (vendor).

Vendor berarti "pemasok". Di Webpack, vendor umumnya mengacu pada pihak ketiga seperti perpustakaan dan kerangka kerja yang digunakan oleh proyek. Bundle

module.exports = {
  pintu masuk: {
    aplikasi: './src/app.js',
    vendor: ['reaksi','reaksi-dom','reaksi-router'],
  }
};

bergantung

vendor proyek dalam bentuk array

Apa yang harus dilakukan Webpack?

Saat ini kita dapat menggunakan CommonsChunkPlugin (CommonsChunkPlugin telah ditinggalkan setelah Webpack 4, Anda dapat menggunakan optimasi.splitChunks) untuk mengekstrak modul umum di dua bagian aplikasi dan vendor

Dengan konfigurasi ini, bundel yang dihasilkan oleh app.js hanya akan berisi Modul bisnis dan modul pihak ketiga yang bergantung padanya akan diekstraksi untuk menghasilkan bundel baru, yang juga mencapai tujuan kami mengekstraksi vendor.

Karena vendor hanya berisi modul pihak ketiga, bagian ini tidak akan sering berubah. Oleh karena itu, caching sisi klien dapat dimanfaatkan secara efektif, yang akan mempercepat kecepatan rendering secara keseluruhan ketika pengguna kemudian meminta halaman tersebut.

CommonsChunkPlugin terutama digunakan untuk mengekstrak perpustakaan pihak ketiga dan modul publik untuk mencegah file bundel yang dimuat di layar pertama atau file bundel yang dimuat sesuai permintaan menjadi terlalu besar, sehingga mengakibatkan waktu pemuatan yang lama.

3. Aplikasi multi-halaman

Untuk skenario aplikasi multi-halaman, untuk mengurangi ukuran sumber daya sebanyak mungkin, kami berharap setiap halaman hanya memuat logika yang diperlukan, daripada mengemas semua halaman ke dalam bundel yang sama. Oleh karena itu, setiap halaman memerlukan bundel independen . Dalam hal ini, kami menggunakan beberapa entri untuk mencapai hal ini. Silakan lihat contoh berikut:

module.exports = {
  pintu masuk: {
    halamanSatu: './src/pageOne/index.js',
    halamanDua: './src/pageTwo/index.js',
    halamanTiga: './src/pageThree/index.js'
  }
};

Konfigurasi di atas memberi tahu webpack bahwa ia memerlukan 3 grafik ketergantungan yang independen dan terpisah. Saat ini, entri dan halaman berada dalam korespondensi satu-ke-satu, sehingga setiap HTML dapat memuat modul yang diperlukan selama ia diperkenalkan. JS-nya sendiri.