Beranda>Tutorial Desain Web>Tutorial Javascript

Keluaran, konsep inti webpack

Penulis：Eve Cole Waktu Pembaruan：2022-08-17 16:36:24
Setelah Anda mengumpulkan semua aset, Anda perlu memberi tahu webpack tempat mengemas aplikasi Anda. Atribut keluaran webpack menjelaskan cara menangani kode yang dibundel. Artikel berikut akan memberi Anda pemahaman mendalam tentang keluaran (Output) pada konsep inti webpack. Semoga bermanfaat bagi Anda!

Keluaran: Mengonfigurasi opsi keluaran dapat mengontrol cara webpack menulis file yang dikompilasi ke hard disk. Perhatikan bahwa meskipun ada beberapa titik masuk , hanya satu konfigurasi keluaran yang ditentukan.

Awal

Pertama-tama kita menginisialisasi proyek npm init , menginstal webpack dan webpack-cli secara lokal, kemudian membuat folder index.html , webpack.config.js dan src di direktori root, dan membuat main.js di folder tersebut sebagai file entri

Setelah pekerjaan persiapan selesai seperti terlihat pada gambar:

gambar.png

Komponen fungsi

main.js

(){
    var div=dokumen.createElement('div')
    div.innerHTML="Mari kita belajar konfigurasi ekspor bersama~"
    kembali div
}
dokumen.body.appendChild(Komponen())

indeks.html

<body>
    <skrip src="./dist/bundle.js"></skrip>
</body>

packag.json

"skrip": {
  "test": "echo "Kesalahan: tidak ada pengujian yang ditentukan" && keluar 1",
  "build":"webpack" //Tambahkan },

lalu bagian konfigurasi: webpack.config.js

output (Output))

Mengonfigurasi opsi output dapat mengontrol cara webpack menulis file yang dikompilasi ke hard disk.

Perhatikan bahwa meskipun terdapat beberapa titik入口, hanya satu konfigurasi输出yang ditentukan.

Berikut adalah beberapa konsep konfigurasi keluaran:

1.

Jalur jalur menentukan lokasi keluaran sumber daya, dan nilai yang diperlukan harus berupa jalur absolut , seperti sebagai :

const jalur=membutuhkan(' jalur')
modul.ekspor={
    entri:'./src/main.js',
    keluaran:{
        nama file:'bundle.js',
        //Setel lokasi keluaran sumber daya ke jalur direktori dist proyek: path.resolve(__dirname, 'dist')
    },
}

Setelah Webpack 4, output.path ditetapkan secara default ke direktori dist . Kecuali kita perlu mengubahnya, tidak perlu mengkonfigurasinya secara terpisah, jadi jika webpack4 atau lebih tinggi, Anda dapat menulis:

module.exports={
    entri:'./src/main.js',
    keluaran:{
        nama file:'bundle.js',
    },
}

2. nama file

Fungsi nama file adalah untuk mengontrol nama file sumber keluaran yang berbentuk string. Di sini saya beri nama bundle.js , yang berarti saya ingin sumber daya dikeluarkan dalam file bernama bundle.js:

module.exports={
    entri:'./src/main.js',
    keluaran:{
        nama file:'bundle.js',
    },
}

Setelah pengemasan, seperti yang ditunjukkan pada gambar, folder dist akan secara otomatis dibuat dengan file bundle.js di dalamnya.

gambar.png

nama file tidak hanya dapat berupa nama bundel, tetapi juga jalur relatif.

Tidak masalah jika direktori di jalur tersebut tidak ada. Webpack akan membuat direktori saat mengeluarkan sumber daya, misalnya:

module.exports = {
    keluaran: {
      nama file: './js/bundle.js',
    },
  };

Seperti yang ditunjukkan pada gambar setelah pengemasan:

gambar.png

Dalam skenario multi-entri , kita perlu menentukan nama yang berbeda untuk setiap bundel yang dihasilkan. Webpack mendukung penggunaan formulir seperti bahasa templat untuk menghasilkan nama file secara dinamis .

Sebelum itu, kita membuat file entri baru di src

.

komponen fungsi(){
    var div=dokumen.createElement('div')
    div.innerHTML="Saya adalah file entri kedua"
    kembali div
}
document.body.appendChild(Komponen())

webpack.config.js:

module.exports = {
    pintu masuk:{
        utama:'./src/main.js',
        penjual:'./src/vender.js'
    },
    keluaran: {
      nama file: '[nama].js',
    },
 };

Seperti yang ditunjukkan pada gambar setelah pengemasan:

gambar.png

[name] pada nama file akan diganti dengan nama potongan yaitu main dan vendor. Oleh karena itu, vendor.js dan main.js akan dibuat pada akhirnya

. Jika Anda ingin melihat kontennya, Anda perlu mengubah konten di index.html dan mencocokkan jalur ke paket paket terakhir

<body>.
    <skrip src="./dist/main.js"></skrip>
    <skrip src="./dist/vender.js"></skrip>
</body>

[Pertanyaan] Saat ini ada kebutuhan. Bagaimana kita bisa membuat index.html secara otomatis menambahkan bundel yang dihasilkan ke html untuk kita? Plug-in HtmlWebpackPlugin dapat digunakan di sini. Lihat di bawah untuk detailnya.

3.

Selain [name] yang dapat merujuk pada nama chunk, ada beberapa variabel template lain yang dapat digunakan dalam konfigurasi nama file:

  • [hash] : mengacu pada semua paket Webpack saat ini. Hash yang dihasilkan oleh sumber daya
  • [chunkhash]: mengacu pada hash dari konten potongan saat ini
  • [id]: mengacu pada id dari potongan saat ini
  • [query]: mengacu pada kueri di dalam item konfigurasi nama file.

Mereka dapat: mengontrol cache klien

[hash] dan [chunkhash] terkait langsung dengan konten potongan. Jika digunakan dalam nama file, ketika konten potongan berubah, itu juga dapat menyebabkan nama file sumber daya berubah, jadi bahwa pengguna akan segera mengunduh versi baru saat berikutnya dia meminta file sumber daya tanpa menggunakan cache lokal.

[query] juga dapat memiliki efek serupa, tetapi tidak ada hubungannya dengan konten potongan dan harus ditentukan secara manual oleh pengembang.

4. publicPath

publicPath adalah item konfigurasi yang sangat penting, digunakan untuk menentukan lokasi permintaan sumber daya.

Ambil gambar pemuatan 
sebagai

contoh.

komponen fungsi() {
    //...
    var img = Gambar baru();
    myyebo.src = Img //Permintaan url
	//...
}
{
          //...
          pertanyaan: {
            nama: '[nama].[ext]',
            jalur keluaran: 'statis/img/',
            jalur publik: './dist/static/img/'
          }
        }

Seperti yang ditunjukkan pada contoh di atas, alamat permintaan gambar asli adalah ./img.jpg , tetapi setelah menambahkan publicPath ke konfigurasi, jalur sebenarnya menjadi ./dist/static/img/img.jpg , sehingga Gambar dapat diperoleh dari sumber daya yang dikemas.

Ada 3 bentuk publicPath:

  • Terkait HTML.

    Kita dapat menentukan publicPath sebagai jalur relatif HTML. Saat meminta sumber daya ini, jalur HTML halaman saat ini akan ditambahkan ke jalur relatif untuk membentuk URL permintaan

    //Asumsikan alamat html saat ini adalah: https://www.example.com/app/index.html
//Sumber daya yang dimuat secara asinkron diberi nama 1.chunk.js
publicPath:"" //-->https://www.example.com/app/1.chunk.js
pubilicPath:"./js" //-->https://www.example.com/app/js/1.chunk.js
publicPath:"../assets/" //-->https://www.example.com/assets/1.chunk.js

  • Host terkait

    Jika nilai publicPath dimulai dengan "/", berarti publicPath di kali ini dimulai dengan Nama host halaman saat ini adalah jalur dasar

    // Asumsikan alamat html saat ini adalah: https://www.example.com/app/index.html
//Sumber daya yang dimuat secara asinkron diberi nama 1.chunk.js
publicPath:"/" //-->https://www.example.com/1.chunk.js
pubilicPath:"/js/" //-->https://www.example.com/js/1.chunk.js

  • Terkait CDN

    Dua di atas adalah jalur relatif. Kita juga dapat menggunakan jalur absolut untuk mengonfigurasi publicPath

    Ini situasi umumnya terjadi ketika sumber daya statis ditempatkan pada CDN. Karena nama domainnya tidak konsisten dengan nama domain halaman saat ini, maka perlu ditentukan dalam bentuk jalur absolut.

    Ketika publicPath dimulai dalam bentuk header protokol atau relatif protokol, artinya jalur saat ini terkait dengan CDN

    / / Asumsikan alamat html saat ini adalah: https://www.example.com/app/index.html
//Sumber daya yang dimuat secara asinkron diberi nama 1.chunk.js
publicPath:"http://cdn.com/" //-->http://cdn.com/1.chunk.js
publicPath:"https://cdn.com/" //-->https://cdn.com/1.chunk.js
pubilicPath:"//cdn.com/assets" //-->//cdn.com/assets/1.chunk.js

aplikasi

1. Pintu masuk tunggal

Persyaratan minimum untuk mengonfigurasi atribut output di webpack adalah menetapkan nilainya ke suatu objek, termasuk dua poin berikut:

  • filename adalah nama file dari file keluaran.
  • Jalur absolut dari path direktori keluaran target
module.exports={
    entri:'./src/main.js',
    keluaran:{
        nama file:'bundle.js',
    },
}
//Setelah webpack 4, dist akan dibuat secara default, jadi jalur dihilangkan di sini.

2. Beberapa entri.

Jika

konfigurasi membuat beberapa "potongan" terpisah, Anda harus menggunakan placeholder untuk memastikan bahwa setiap file memiliki nama unik

digunakan di sini. [name] dari nama file yang disebutkan.

Selain itu, jika Anda ingin memasukkan sumber daya ini ke dalam folder yang ditentukan, Anda dapat menambahkan konfigurasi path

module.exports={
    pintu masuk: {
      utama: './src/main.js',
      penjual: './src/vender.js'
    },
    keluaran: {
      nama file: '[nama].js',
      path: __dirname + '/dist/assets' //Tentukan paket bundel ditempatkan di direktori /dist/assets}
  }
// Hasilkan setelah pengemasan: ./dist/assets/main.js, ./dist/assets/vender.js

HtmlWebpackPlugin

Masalah lainnya di atas dalam bab ini dapat diselesaikan dengan menggunakan plug-in HtmlWebpackPlugin

Instal plugin

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

konfigurasikan plugin

const HtmlWebpackPlugin=require('html-webpack-plugin') //Muat modul module.exports = {
    pintu masuk:{
        utama:'./src/main.js',
        penjual:'./src/vender.js'
    },
    //Tambahkan plugin plugin:[
        Plugin HtmlWebpack baru({
            judul: 'manajemen keluaran'
        })
    ],
    keluaran: {
      nama file: '[nama].js',
    },
 };
Setelah

pengemasan

selesai, Anda akan menemukan index.html baru muncul di dist, yang secara otomatis menambahkan sumber daya yang dihasilkan untuk kami. Setelah dibuka, Anda akan menemukan bahwa browser akan menampilkan konten.

gambar.png

Artinya Anda tidak perlu menulis index.html saat menginisialisasi proyek di masa mendatang.

Kode sumber dapat diperoleh di sini:

https://sanhuamao1.coding.net/public/webpack-test/webpack-test/git/. file
Artikel Terkait