Webpack 4 وتقسيم ملف التكوين إلى وحدات

مرحبا يا هبر! اليوم سأخبرك عن Webpack 4 مع فصل الكود إلى وحدات منفصلة ، بالإضافة إلى الحلول المثيرة للاهتمام التي ستساعدك على بناء تجميع webpack 4 بشكل أسرع. وفي النهاية ، سأزودك بتجميع حزم الويب الأساسي الخاص بي بأكثر الأدوات الضرورية ، والتي يمكنك فيما بعد للتوسيع. ستساعدك هذه المجموعة على فهم هذه المواد ، وقد تساعدك أيضًا على كتابة التنفيذ الخاص بك بشكل أسرع وحل المشكلات المحتملة بشكل أسرع.

الإيديولوجية الرئيسية لهذا التجميع هي الفصل الصحيح للكود داخل ملف التكوين لتسهيل الاستخدام والقراءة ونظافة webpack.config.js. سيتم وضع الوحدات والمكونات الإضافية اللازمة لإصدارات dev و prod (وكذلك لفصل الوظائف في الملف الرئيسي) في مجلد حزمة ويب منفصل ويتم استيراده منه للاتصال بالتكوين الرئيسي.

لماذا هذا النهج مطلوب؟

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

ماذا نحتاج؟

سنستخدم البرنامج المساعد لدمج webpack .

نقوم بإنشاء مجلد Webpack وإخراج جميع الوحدات الفردية في ملفات منفصلة. على سبيل المثال ، webpack / pug.js و webpack / scss.js وتصدير هذه الوظائف منها.

ملف Pug.js

module.exports = function() { return { module: { rules: [ { test: /\.pug$/, loader: 'pug-loader', options: { pretty: true, }, }, ], }, }; }; 

ملف webpack.config.js . في هذا الملف نقوم بتوصيلها ، وبمساعدة هذا البرنامج المساعد ، نتصل بسهولة وسرعة.

 const merge = require('webpack-merge'); const pug = require('./webpack/pug'); const common = merge([ { entry: { 'index': PATHS.source + '/pages/index/index.js', 'blog': PATHS.source + '/pages/blog/blog.js', }, output: { path: PATHS.build, filename: './js/[name].js', }, plugins: […], optimization: { … }, }, pug(), ]); 

الآن إذا كانت لدينا مهمة جديدة ، والتي نحتاج إليها من أجل وحدة نمطية جديدة ، ومكونات إضافية ، ومحمل ، ثم ننقلها إلى وحدة الفندق (الملف) ونضعها في مجلد حزمة الويب ، ثم نربطها بملف التكوين الرئيسي ، مع الحفاظ على التكوين نظيفًا قدر الإمكان.

إعدادات الإنتاج والتطوير

الآن ، بمساعدة المبتذلة ، إذا ، سننهي فصلنا ، الذي نهدف إليه ، ونقوم بتهيئة حزمة الويب الخاصة بنا لهذين النوعين من التطوير ، مما يجعلها ملائمة أخيرًا لاستخدام هذه الأداة ، وأيضًا في المستقبل سنتمكن من تكوينها بمرونة وببساطة لأي مشروع آخر ، أو التوسع في التيار الحالي. للتصدير إلى عقدة (لحزمة الويب نفسها) في حزمة الويب 4 ، نستخدم البناء التالي:

 module.exports = function(env, argv) { if (argv.mode === 'production') { return merge([ common, extractCSS(), favicon(), ]); } if (argv.mode === 'development') { return merge([ common, devserver(), sass(), css(), sourceMap(), ]); } 

في الشيء المشترك ، نقوم بتوصيل ما يتم استخدامه في كل من التطوير وفي التطوير ، وفي الظروف التي نربط بها فقط الوحدات الضرورية في هذه الحالات.

أود الآن أن أتحدث عن الميزات الرئيسية لـ webpack 4 بخصوص webpack 3

• لبدء سريع ، لا يحتاج webpack 4 إلى webpack.config.js ، والآن يحتاج فقط إلى نقطة إدخال (index.js)
• في الإصدار الجديد ، توجد واجهة سطر أوامر webpack في حزمة منفصلة وتحتاج إلى تثبيت webpack-cli.
• لتشغيل حزمة الويب 4 ، تحتاج (وإلا فسيكون تحذيرًا) في البرامج النصية حدد الوضع (وضع التشغيل) - إنتاج الوضع أو - تطوير الوضع ، اعتمادًا على المفتاح ، يتغير تشغيل حزمة الويب. يهدف وضع التطوير إلى تسريع البناء. في نسخة الإنتاج ، كل شيء يهدف إلى التصغير النهائي للكود.
• من أجل إنشاء ملفات common.js و common.css ، لم يعد CommonsChunkPlugin مستخدمًا ، أصبحت SplitChunks مسؤولة الآن عن هذا ويتم استخدام البناء التالي:
  
  

    optimization: { splitChunks: { cacheGroups: { 'common': { minChunks: 2, chunks: 'all', name: 'common', priority: 10, enforce: true, }, }, }, }, 

  
  في حزمة الويب 3 - سيكون الأمر كذلك في المكونات الإضافية:
  
  

   new webpack.optimize.CommonsChunkPlugin({ name: 'common ', }) 

  
  وفقًا لذلك ، في الأجزاء الموجودة في HtmlWebpackPlugin نقوم بالاتصال (هنا بدون تغييرات).
  
  

   plugins: [ new HtmlWebpackPlugin({ filename: 'index.html', chunks: ['index', 'common'], template: PATHS.source + '/pages/index/index.pug', }), ], 

  
  
• النقطة المهمة التالية ، من أجل إنشاء sourceMap ، نستخدم الآن النهج التالي - نقوم بإنشاء ملف sourceMap.js في مجلد webpack وربطه في إصدار dev على سبيل المثال (كما ذكر أعلاه):
  
  

   module.exports = function() { return { devtool: 'eval-sourcemap', }; }; 

الآن نهج الإضافات: [new webpack.optimize.UglifyJsPlugin ({})] لا يعمل.

مع هذا ، أود أن أكمل قصتي وأن أقدم تجميعي الأساسي - رابط إلى حزمة الويب 4 ، والتي ستساعدك على الأرجح في عملك وتطويرك. شكرا لكم على اهتمامكم!