أساسيات إعداد Webpack

أولاً ، سنقوم بتثبيت حزمة الويب ، ويتم ذلك باستخدام الأوامر:



yarn add webpack webpack-cli -Dإذا كنت تستخدم مدير حزمة الغزل

npm i webpack webpack-cli --save-dev،



حيث يتم تكوين Webpack مدير الحزمة npm باستخدام ملف التكوين webpack.config.js، والذي يتم تخزينه في الدليل الجذر للمشروع.



مثال على ملف التكوين:

const path = require('path')
module.exports = {
   watch: true,
   entry: "./src/index.js",
   output: {
       filename: "bundle.js",
       path: path.resolve(__dirname,'build'),
       publicPath: "/"
   }
};

التكوين الأولي كما يلي:

• مشاهدة - يجعل webpack يراقب التغييرات في الملفات ويعيد البناء ؛
• دخول - يشير إلى نقطة الدخول إلى المشروع ، ومكان البدء في بناء الرسم البياني للاعتمادات الداخلية للمشروع ؛
• الإخراج - يحدد المسار حيث سيتم تحديد موقع الملف الذي تم إنشاؤه وكيف سيتم تسميته ؛

تحتاج أيضًا إلى تثبيت خادم webpack-dev-server ، والذي تحتاجه لتطوير التطبيق وتصحيحه.



yarn add webpack-dev-serverلخيوط مدير الحزم أو

npm i webpack-dev-serverإذا كنت تستخدم npm



لتكوين webpack-dev-server ، أضف devServer في ملف التكوين الخاص بنا.



معلمات webpack-dev-server:

module.exports = {
    //...
    devServer: {
        port: 8000,
        historyApiFallback: true,
        hot: true,
    },
};

نحتاج أيضًا إلى إضافة / استبدال البرنامج النصي لبدء تشغيل المشروع في ملف package.json الخاص بنا:

"start": "webpack-dev-server --mode development",

ونص لبناء المبنى:

"build": "webpack --mode production"

محمل الإقلاع

اللوادر عبارة عن وحدات نمطية خاصة تُستخدم "لتحميل" الوحدات النمطية الأخرى. كما أنها تسمح لك بمعالجة الملفات أثناء استيرادها أو "تحميلها".



يمكن لأجهزة التحميل تحويل ملفات مثل TypeScript إلى JavaScript ، أو sass إلى css. حتى أنها قد تسمح لنا بالقيام بأشياء مثل استيراد ملفات CSS و HTML مباشرة إلى وحدات JavaScript النمطية الخاصة بنا. لاستخدامها ، تحتاج إلى تسجيل برامج التحميل الضرورية في قسم module.rules من ملف التكوين.



أمثلة لودر:

• babel-loader - يستخدم babel لتحميل ملفات ES2015.
• ملف محمل - لتحميل مختلف الملفات (الصور والمقطوعات الموسيقية، وغيرها) إلى الدليل الإخراج
• محمل النمط - يستخدم لتحميل الأنماط
• مُحمل css - يتيح تحميل ملفات النمط
• @ svgr / webpack - أداة تحميل تتيح لك استخدام صور svg كعناصر jsx

لاستخدام محمل babel تحتاج إلى تثبيتبابل/ الأساسية . قم أيضًا بتثبيت الإعداد المسبقبابل/ preset-env ، الذي يجمع ES2015 + إلى ES5 عن طريق الكشف التلقائي عن الإضافات والملفات المتعددة التي يحتاجها Babel. بعد ذلك ، قم بإنشاء ملف .babelrc وأضف الإعداد المسبق المثبت مسبقًا إليه.

{
 "presets": [
   "@babel/preset-env"
 ]
}

الآن دعنا نضيف أداة تحميل إلى التكوين الخاص بنا لتحويل ملفات Javascript. سيسمح لنا ذلك باستخدام بناء جملة ES2015 + في الكود الخاص بنا (والذي سيتم تحويله تلقائيًا إلى ES5 في البنية النهائية).

{
   test: /\.(js|jsx)$/,
   exclude: /node_modules/,
   use: {
       loader: 'babel-loader',
   },
},

مثال التكوين مع أداة تحميل الملفات

{
   test: /\.(png|jpe?g|gif)$/i,
   use: [
       {
           loader: 'file-loader',
       },
   ],
},

تكوين مثال لمحمل @ svgr / webpack

{
   test : /\.(svg)$/,
   use: [
       {
           loader: "@svgr/webpack"
       }
   ]
}

الإضافات

المكونات الإضافية هي العمود الفقري لـ webpack ، نظرًا لأن كل عملها بشكل أساسي مبني على نظام البرنامج المساعد. أنها توسع بشكل كبير من قدرات محمل الإقلاع.



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



لاستخدامها ، تحتاج إلى إضافة المكونات الإضافية الضرورية في قسم الملحقات في ملف التكوين.



أمثلة على المكونات الإضافية:

• html-webpack-plugin - يستخدم لإنشاء ملفات html
• copy-webpack-plugin - ينسخ الملفات الفردية أو الدلائل الكاملة الموجودة بالفعل إلى دليل الإنشاء .
• selectPlugin - يسمح لك بإنشاء ثوابت عالمية
• HotModuleReplacementPlugin - يقوم بتشغيل وضع HMR ، ويقوم بتحديث الجزء الذي تغير فقط ، دون إعادة تحميل التطبيق بالكامل.

مثال على التكوين مع الإضافات المضافة:

plugins: [
   new webpack.HotModuleReplacementPlugin(),
   new webpack.DefinePlugin({
       'process.env': JSON.stringify(process.env),
   }),
   new HtmlWebpackPlugin({
       template: "./public/index.html",
   }),
   new CopyWebpackPlugin({
       patterns: [
           { from: './public/favicon.ico', to: './public'}
       ]
   }),
],

سنضيف أيضًا المكوّن الإضافي UglifyjsWebpackPlugin ، الذي يصغر كود js ، لذلك تحتاج إلى تثبيت uglifyjs-webpack-plugin وإضافته في قسم التحسين

optimization: {
   minimizer: [new UglifyJsPlugin()]
},