5 plugin webpack bermanfaat

Halo, Habr!

Webpack memiliki banyak plugin berguna yang banyak yang tidak tahu dan tidak digunakan dalam proyek mereka. Di bawah potongan, saya mengumpulkan 5 ini, mereka dapat sangat menyederhanakan hidup Anda!

1. File webpack plugin yang tidak digunakan

Dalam proyek-proyek besar front-end, selalu ada banyak modul yang mudah tersesat. Jika Anda tidak memeriksa proyek untuk modul yang tidak digunakan, maka cepat atau lambat proyek akan mengakumulasi file sampah yang tidak digunakan di mana pun.

Untuk mengetahui tentang file yang tidak digunakan dalam suatu proyek, tambahkan plugin file-webpack yang tidak digunakan ke konfigurasi Anda:

npm i unused-files-webpack-plugin 

 /* webpack.config.js */ const { UnusedFilesWebpackPlugin } = require('unused-files-webpack-plugin'); module.exports = { /* ... */ plugins: [ /* ... */ new UnusedFilesWebpackPlugin(), ], }; 

Setelah instalasi, Anda akan menerima peringatan tentang file yang tidak digunakan:

 src/ ├── index.js └── someFile.js ( ) 

 WARNING in UnusedFilesWebpackPlugin found some unused files: src/someFile.js 

Referensi:

→ Github
→ NPM

2. Plugin jalur sensitif case webpack

Selama pengembangan pada OSX, seringkali mungkin untuk membingungkan huruf kecil dan huruf besar di jalur ketika mengimpor modul. Perakitan akan berkumpul di poppy, tetapi pada sistem case-sensitive lainnya, ia akan jatuh.

Jika Anda ingin menghilangkan masalah ini, Anda perlu meletakkan case-sensitive-paths-webpack-plugin:

 npm i case-sensitive-paths-webpack-plugin 

 /* webpack.config.js */ const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin'); module.exports = { /* ... */ plugins: [ /* ... */ new CaseSensitivePathsPlugin(), ], }; 

Sekarang saat mengimpor modul dengan case yang salah, Anda akan selalu mendapatkan kesalahan:

 /* index.js */ import someFile from './SOMEFILE'; 

 /* someFile.js */ export default () => { console.log('Hello!'); }; 

 ERROR in index.js Module not found: Error: [CaseSensitivePathsPlugin] `SOMEFILE.js` does not match the corresponding path on disk `someFile.js`. 

Masalah ini juga dapat diselesaikan dengan menggunakan plugin eslint impor / tidak-tidak terselesaikan .

Dalam naskah, ada opsi serupa untuk bekerja - forceConsistentCasingInFileNames. Tetapi berperilaku sedikit berbeda: memeriksa bahwa mengimpor modul dari tempat yang berbeda tidak berbeda dalam kasus, kebenaran register tidak dicentang.

Referensi:

→ Github
→ NPM

3. Periksa paket

Dalam proyek Anda, situasi mungkin muncul bahwa Anda dan paket Anda menggunakan versi berbeda dari perpustakaan yang sama. Kemudian beberapa bundel paket akan muncul dalam bundel, yang dapat dengan mudah diperbaiki dengan menentukan versi yang sama.

Inspectpack akan membantu Anda menemukan situasi ini segera:

 npm i inspectpack 

 /* webpack.config.js */ const { DuplicatesPlugin } = require('inspectpack/plugin'); module.exports = { /* ... */ plugins: [ /* ... */ new DuplicatesPlugin(), ], }; 

Jika Anda menginstal plugin, maka peringatan akan muncul ketika salinan paket muncul:

 /* package.json */ { /* ... */ "name": "my-app", "dependencies": { "lodash": "4.1.0", "one": "1.2.3" } } 

 /* node_modules/one/package.json */ { /* ... */ "name": "one", "dependencies": { "lodash": "3.0.0" } } 

 /* index.js */ import _ from 'lodash'; import 'one'; /* ... */ 

 WARNING in Duplicate Sources / Packages - Duplicates found! ️ * Duplicates: Found 2 similar files across 2 code sources (both identical + similar) accounting for 703 bundled bytes. * Packages: Found 1 packages with 2 resolved, 2 installed, and 2 depended versions. ## bundle.js lodash (Found 2 resolved, 2 installed, 2 depended. Latest 4.1.0.) 3.0.0 ~/one/~/lodash scenario-new-webpack-new-npm-unflattened@* -> one@1.2.3 -> lodash@3.0.0 4.1.0 ~/lodash scenario-new-webpack-new-npm-unflattened@* -> lodash@4.1.0 

Fungsionalitas serupa disediakan oleh duplikat-paket-pemeriksa-webpack-plugin . Tetapi ada satu masalah dengan itu - tidak menunjukkan beberapa kemunculan satu versi perpustakaan, yaitu masalah dalam contoh di bawah spoiler, di mana ada beberapa versi identik tslib, dia tidak dapat menemukan.

Referensi:

→ Github
→ NPM

4. Plugin ketergantungan sirkular

Selama pengembangan, kadang-kadang ada masalah dengan menyelesaikan dependensi - dua modul saling mengimpor dan ketergantungan melingkar diperoleh. Ini dapat terjadi secara implisit, melalui rantai modul lain. Dalam kasus yang jarang terjadi, dependensi siklik adalah normal, tetapi kemungkinan besar ini menunjukkan bahwa ada masalah dalam arsitektur proyek.

Untuk segera melihat dependensi melingkar dan menghapusnya, tambahkan edaran-dependensi-plugin:

 npm i circular-dependency-plugin 

 /* webpack.config.js */ const CircularDependencyPlugin = require('circular-dependency-plugin'); module.exports = { /* ... */ plugins: [ /* ... */ new CircularDependencyPlugin(), ], }; 

Sekarang, ketika ketergantungan melingkar muncul, Anda akan menerima peringatan:

 /* first.js */ import second from './second' /* ... */ 

 /* second.js */ import first from './first' /* ... */ 

 WARNING in Circular dependency detected: first.js -> second.js -> first.js WARNING in Circular dependency detected: second.js -> first.js -> second.js 

Aturan import / no-cycle untuk eslint dan tslint-no-circular-import untuk tslint menyelesaikan masalah yang sama. Yang terakhir, bagaimanapun, tidak memiliki kemampuan untuk mengabaikan impor jenis, antarmuka, dan kelas yang hanya digunakan untuk mengetik - Anda harus sering menulis tslint: disable.

Referensi:

→ Github
→ NPM

5. Mengukur kecepatan plugin webpack

Dalam proyek besar yang terdiri dari beberapa ratus file, perakitan dapat memakan waktu hingga beberapa menit.

Kecepatan-ukur-webpack-plugin akan membantu mengukur setiap langkah pembuatan dan menemukan masalah:

 npm i speed-measure-webpack-plugin 

 /* webpack.config.js */ const SpeedMeasurePlugin = require("speed-measure-webpack-plugin"); const smp = new SpeedMeasurePlugin(); module.exports = smp.wrap({ /* ... */ }); 

Output build akan menambahkan informasi tentang total waktu build, waktu eksekusi setiap plugin dan setiap rantai pemuat:

  SMP General output time took 48.97 secs SMP - Plugins TerserPlugin took 19.6 secs OptimizeCssAssetsWebpackPlugin took 2.65 secs MiniCssExtractPlugin took 0.261 secs VueLoaderPlugin took 0.216 secs /* ... */ SMP - Loaders mini-css-extract-plugin, and css-loader, and postcss-loader took 21.81 secs module count = 33 cache-loader, and babel-loader, and ts-loader, and tslint-loader took 21.63 secs module count = 240 /* ... */ 

Dia membantu saya menemukan masalah dengan kecepatan minifikasi TerserPlugin: Saya menghapus beberapa pengaturan yang hampir tidak berpengaruh pada ukuran file yang dihasilkan, dan mempercepatnya dengan beberapa detik.

Referensi:

→ Github
→ NPM