Cara membuat plugin Webpack khusus – Beragampengetahuan

Membuat plugin untuk Webpack memungkinkan Anda menyesuaikan dan memperluas fungsionalitas Webpack agar sesuai dengan kebutuhan Anda. Plugin Webpack dapat melakukan berbagai tugas, mulai dari konversi dan pengoptimalan file hingga analisis dan pembuatan kode. Ini adalah panduan langkah demi langkah untuk membuat plugin Webpack sederhana.

Langkah-langkah membuat plugin Webpack

1. Siapkan proyek Anda

Pertama, Anda perlu menyiapkan proyek dasar Node.js (jika Anda belum memilikinya).

1 mkdir custom-webpack-plugin
2 cd custom-webpack-plugin
3 npm init -y
4 npm install webpack --save-dev

2. Buat file plugin

Buat folder plugin Untuk plugin Anda, di sinilah Anda akan menulis logikanya. Misalnya, mari kita buat a Plugin.js khusus dokumen.

1 mkdir plugins
2 touch plugins/CustomPlugin.js

3. Tulis kode plugin

Di file CustomPlugin.js, Anda akan menentukan plug-in Anda. Plugin Webpack pada dasarnya adalah kelas JavaScript dengan metode penerapan yang terhubung ke siklus hidup Webpack.

1 class CustomPlugin {
2     constructor(options) {
3         
4         this.options = options;
5     }
6 
7     
8     apply(compiler) {
9         
10         compiler.hooks.done.tap('CustomPlugin', (stats) => {
11             console.log('Build process is done!');
12             
13         });
14 
15         
16         compiler.hooks.emit.tapAsync('CustomPlugin', (compilation, callback) => {
17             
18             console.log('Assets are being emitted...');
19 
20             
21             callback();
22         });
23     }
24 }
25 
26 module.exports = CustomPlugin;

4. Daftarkan plugin di Webpack

Buat file konfigurasi Webpack (webpack.config.js), lalu daftarkan plugin Anda.

sentuh webpack.config.js

1 const CustomPlugin = require('./plugins/CustomPlugin');
2 
3 module.exports = {
4     mode: 'development',
5     entry: './src/index.js',
6     output: {
7         filename: 'bundle.js',
8         path: __dirname + '/dist'
9     },
10     plugins: [
11         new CustomPlugin({
12             message: 'Hello Webpack!' 
13         })
14     ]
15 };

5. Uji plugin Anda

Bagaimana cara kerjanya?

Webpack akan mengambil file src/index.js yang kita tentukan di konfigurasi, mengubahnya menjadi bundle.js, lalu memasukkan plugin kita.

Mari buat src/index.js untuk mencegah Webpack melakukan kesalahan.

sentuh src/index.js

lalu isi

1 console.log('Hello from index.js');

Sekarang, saat Anda menjalankan Webpack, plugin Anda akan mengeksekusi dan mencetak log atau mengubah output sesuai kebutuhan.

paket web npx

Siklus hidup plugin Webpack

Webpack menyediakan beberapa hook yang dapat digunakan pada berbagai tahap proses pembangunan:

• emisi: Saat Webpack hendak mengirim aset ke direktori keluaran.
• kompilasi: Saat Webpack mulai mengkompilasi modul.
• setelah peluncuran: Setelah aset diterbitkan.
• menyelesaikan: Setelah proses build selesai.

Anda dapat mengakses kait ini menggunakan tap, tapAsyncatau tapPromise Tergantung pada apakah pengaitnya sinkron atau asinkron.

Contoh: Tambahkan file khusus ke output

Berikut ini contoh singkat cara menggunakan plugin untuk menambahkan file khusus ke keluaran Webpack:

1 class AddCustomFilePlugin {
2     apply(compiler) {
3         compiler.hooks.emit.tapAsync('AddCustomFilePlugin', (compilation, callback) => {
4             
5             const content = 'This is a custom file created by the AddCustomFilePlugin!';
6             compilation.assets['custom-file.txt'] = {
7                 source: () => content,
8                 size: () => content.length
9             };
10             callback();
11         });
12     }
13 }
14 
15 module.exports = AddCustomFilePlugin;

ada webpack.config.js:

1 const AddCustomFilePlugin = require('./plugins/AddCustomFilePlugin');
2 
3 module.exports = {
4     mode: 'development',
5     plugins: [
6         new AddCustomFilePlugin()
7     ]
8 };

Saat Anda menjalankan Webpack, sebuah file bernama custom-file.txt akan ditambahkan ke dist/ map.

sebagai kesimpulan

Membuat plugin Webpack melibatkan:

• Tentukan kelas menggunakan metode apply.
• Gunakan berbagai kait untuk menghubungkan ke siklus hidup Webpack.
• (Opsional) Ubah kompilasi atau aset Webpack.

Setelah Anda memahami siklus hidup plugin, Anda dapat memperluas Webpack dengan cara yang ampuh untuk mengotomatiskan tugas dan meningkatkan proses pembuatan Anda!