How to Compress Image with webpack on nodejs

 

How to compress image with webpack on nodejs - pertama siapkan berkas yang akan kita kompress gambarnya. jadi kita menggunakan imagemin pada environment webpack untuk mengkrompesi gambar

Download Berkas Disini

1. Langkah pertama perhatikan berkas yang didownload terdapat file yaitu folder src , file package.json. server.js , dan file webpack.config.js  

2. Adapun gambar yang akan kita kompress yaitu gambar yang berada pada folder src -> images

3.  Untuk menjalankan program terlebih dahulu jalankan perintah berikut terlebih dahulu pada bash / commmand prompt teman-teman :

Download Node JS terlebih dahulu disini

# npm install

# npm run build

# npm run start

4. Nah ketika jalan, berkas dapat teman-teman lihat pada url : localhost:8080 secara default berkas webpack berjalan pada port tersebut;

5.kemudian setelah itu, untuk mengkompresi gambar-gambar tersebut, konfigurasi file webpack.config.js seperti berikut:

6. pada bagian module.export tepatnya di bagian plugin tambahkan konfigurasi berikut. 

6.  maka tampilan code seluruhnya seperti berikut.

7. Setelah teman2 konfigurasi maka jalan perintah berikut lagi. akan tetapi sebelumnya jika terdapat folder dist silahkan dihapus terlebih dahulu agar image yang akan dikompresi tidak tertimpa didalam folder tersebut.

# npm run build

# npm run start

8. maka akan terdapat folder dist dengan iamge yang telah terkompresi.