5 ملحقات webpack مفيدة

مرحبا يا هبر!

تحتوي حزمة الويب على العديد من الإضافات المفيدة التي لا يعرفها الكثيرون ولا يستخدمونها في مشاريعهم. تحت الخفض ، جمعت 5 من هؤلاء ، يمكنهم تبسيط حياتك إلى حد كبير!

1. الملفات غير المستخدمة webpack المساعد

في المشروعات الأمامية الكبيرة ، هناك دائمًا العديد من الوحدات التي يسهل عليك ضياعها. إذا لم تقم بفحص المشروع بحثًا عن الوحدات النمطية غير المستخدمة ، فسوف يتراكم عاجلاً أم آجلاً الملفات غير المرغوب فيها غير المستخدمة في أي مكان.

للتعرف على الملفات غير المستخدمة في مشروع ما ، أضف البرنامج المساعد غير المستخدم-webpack-plugin إلى التكوين الخاص بك:

npm i unused-files-webpack-plugin 

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

بعد التثبيت ، ستتلقى تحذيرات حول أي ملفات غير مستخدمة:

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

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

المراجع:

→ جيثب
→ NPM

2. قضية مسارات حساسة webpack المساعد

أثناء التطوير على OSX ، غالبًا ما يكون من الممكن الخلط بين الأحرف الصغيرة والأحرف الكبيرة في المسار عند استيراد وحدة نمطية. سوف يتجمع التجميع على الخشخاش ، ولكن في الأنظمة الأخرى الحساسة لحالة الأحرف ، سوف يسقط.

إذا كنت ترغب في التخلص من هذه المشكلة ، فأنت بحاجة إلى وضع البرنامج المساعد الحساسة لحالة الأحرف - 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(), ], }; 

الآن عند استيراد وحدة نمطية بها الحالة الخطأ ، ستظهر لك دائمًا رسالة خطأ:

 /* 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`. 

يمكن أيضًا حل هذه المشكلة باستخدام البرنامج المساعد للاستيراد / عدم حل eslint.

يوجد في typescript خيار مماثل للعمل - forceConsistentCasingInFileNames. لكنها تتصرف بشكل مختلف بعض الشيء: فهي تتحقق من أن استيراد الوحدة النمطية من أماكن مختلفة لا يختلف في الحالة ، ولا يتم التحقق من صحة السجل.

المراجع:

→ جيثب
→ NPM

3. Inspectpack

في مشروعك ، قد ينشأ موقف بأنك وباستخدام حزمك تستخدم إصدارات مختلفة من نفس المكتبة. ثم ستظهر حزم متعددة في الحزمة ، والتي يمكن إصلاحها بسهولة عن طريق تحديد نفس الإصدارات.

سيساعدك نظام Inspectpack في العثور على هذا الموقف على الفور:

 npm i inspectpack 

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

إذا قمت بتثبيت المكون الإضافي ، فسيظهر تحذير عند ظهور نسخ من الحزمة:

 /* 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 

يتم توفير وظائف مماثلة من خلال مكررة-package-checker-webpack-plugin . ولكن هناك مشكلة واحدة - فهي لا تظهر عدة مرات لإصدار واحد من المكتبة ، أي المشكلة في المثال تحت المفسد ، حيث توجد عدة إصدارات مماثلة من tslib ، وقال انه لا يمكن العثور عليها.

المراجع:

→ جيثب
→ NPM

4. التعميم التبعية المساعد

أثناء التطوير ، توجد أحيانًا مشاكل في حل التبعيات - تستورد وحدتان منهما بعضهما البعض ويتم الحصول على تبعية دائرية. يمكن أن يحدث هذا ضمنيًا ، من خلال سلسلة من الوحدات النمطية الأخرى. في حالات نادرة ، تكون التبعيات الدورية طبيعية ، ولكن على الأرجح يشير هذا إلى وجود مشكلة في بنية المشروع.

لرؤية التبعية الدائرية وإزالتها فورًا ، أضف المكون الإضافي الدائري:

 npm i circular-dependency-plugin 

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

الآن ، عندما تظهر تبعية دائرية ، ستتلقى تحذيرًا:

 /* 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 

قواعد الاستيراد / عدم دورة ل eslint و tslint - no- التعميم - الواردات ل tslint حل مشكلة مماثلة. ومع ذلك ، لا تتمتع هذه الأخيرة بالقدرة على تجاهل استيراد الأنواع ، والواجهات ، والفئات التي تستخدم فقط للكتابة - سيتعين عليك في كثير من الأحيان كتابة tslint: تعطيل.

المراجع:

→ جيثب
→ NPM

5. سرعة قياس البرنامج المساعد webpack

في المشروعات الكبيرة التي تتكون من عدة مئات من الملفات ، يمكن أن يستغرق التجميع عدة دقائق.

سيساعد Speed-measure-webpack-plugin في قياس كل خطوة بناء وإيجاد المشكلات:

 npm i speed-measure-webpack-plugin 

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

ستضيف مخرجات الإنشاء معلومات حول إجمالي وقت الإنشاء ووقت تنفيذ كل مكون إضافي وكل سلسلة من اللوادر:

  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 /* ... */ 

لقد ساعدني في العثور على مشكلة في سرعة التصغير لـ TerserPlugin: لقد قمت بإزالة العديد من الإعدادات التي لم يكن لها أي تأثير تقريبًا على حجم الملفات الناتجة ، وقمت بتسريعها بضع ثوانٍ.

المراجع:

→ جيثب
→ NPM