دليل Webpack 5

مرة أخرى في الأيام التي تم فيها تقديم الوحدات النمطية في Javascript ، لم تكن هناك طريقة لدعم الوحدات النمطية داخل متصفحات الويب. لإصلاح هذه المشكلة ، تم تطوير حزم الوحدات النمطية مثل Parcel و Webpack و Rollup. ساعد ذلك في تحسين وحدات متعددة في حزمة جاهزة للإنتاج ، والتي يمكن تنفيذها بواسطة المتصفحات.

اليوم ، عندما يتعلق الأمر بالنظام البيئي لتجميع الوحدات ، فإن الأداة الأكثر تواجدًا على شفاه الجميع هي Webpack.

بالنسبة لي ، كان webpack مخيفًا جدًا للتعامل معه ، أفضل استخدام أدوات مثل vue-create إذا كنت بحاجة إلى إعداد مشروع Vue أو create-react-app لإعداد تطبيق React ، فقط لتجنب كل التعقيدات التي شعرت بها أثناء العمل مع webpack.

إذا كنت كما اعتدت أن أكون ، أي أنك تشعر بأن إعداد حزمة الويب من البداية باستخدام Babel أو SASS أو Vue أو TypeScript ، يمكن أن يكون مربكًا جدًا ، فهذا الدليل مناسب لك!

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

مع وجود الكثير من الأجزاء المتحركة إليه ، سوف نتعلم مفاهيم أساسية مختلفة لتعريفك بـ webpack وبناء webpack boilerplate لمساعدتك على الاستعداد والتشغيل عند إعداد أي مشروع من البداية باستخدام أداة تجميع الوحدات الشائعة على نطاق واسع.

ما هو Webpack؟

بغض النظر عن مدى تعقيد حزمة الويب ، يظل هدفها الأساسي واضحًا جدًا ؛ يتطلب مجموعة من الأصول المختلفة ، والملفات المختلفة - من أنواع مختلفة ؛ JavaScript ، الصور ، SASS ، PostCSS ، أيًا كان الملف ، وهو يجمعهم معًا (يجمعهم) في مجموعة أصغر من الملفات ، ربما ملف واحد ، أو يمكن أن يكون ملفًا واحدًا لجافا سكريبت ، ملف واحد لأوراق الأنماط ، واحد لجافا سكريبت طرف ثالث ، وواحد لملف جافا سكريبت الفهرس.

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

وفقا ل جيثب الرسمي الصفحة:

"مجمع لجافا سكريبت والأصدقاء. يحزم العديد من الوحدات في عدد قليل من الأصول المجمعة. يسمح تقسيم الكود بتحميل أجزاء من التطبيق عند الطلب. من خلال "اللوادر" ، يمكن أن تكون الوحدات النمطية CommonJs و AMD و ES6 و CSS والصور و JSON و Coffeescript و LESS ... والأشياء المخصصة الخاصة بك. "

هناك الكثير في Webpack ، وفي هذه المرحلة من هذا الدليل ، نحن على وشك الغوص في التعرف على مفاهيم Webpack الأساسية.

إعداد مشروع

في دليلك المفضل لهذا البرنامج التعليمي ، قم بإنشاء مجلد جديد: webpack-app، لإسكان مشروع webpack.

$ mkdir webpack-app

بعد ذلك ، دعنا نهيئ Node.js في مجلد المشروع عن طريق تشغيل الأوامر التالية في المحطة الطرفية ، من دليل المشروع:

$ cd webpack-app

$ npm init --yes

سيؤدي هذا إلى إنشاء ملف package.json ملف يجعل من الممكن والسهل تتبع تبعيات التطبيق.

الآن بعد أن تمت تهيئة Node في مشروعنا ، يمكننا البدء في تثبيت الحزم المختلفة التي سنحتاجها. للمتابعة ، دعنا نثبت الحزم الأساسية: webpack و webpack-cli.

$ yarn add --dev webpack webpack-cli
# Or
$ npm install --save-dev webpack webpack-cli

• webpack تسمح لنا الحزمة بإنتاج وحدات JavaScript مجمعة للاستخدام في المستعرض ، في حين أن ملف webpack-cli هي أداة توفر مجموعة من الأوامر التي تسهل على المطورين إعداد مشروع webpack مخصص بسرعة.

للبدء ، دعنا ننشئ مجلدين جديدين في الدليل الجذر src و dist. في src مجلد ، قم بإنشاء ملف index.js ملف من شأنه أن يكون بمثابة ملف الجذر لتطبيقنا.

تكوين المشروع

بعد ذلك ، في جذر دليل المشروع الخاص بنا ، دعنا نقوم بإعداد ملف التكوين webpack.config.js لتحديد كيفية تشكيل التجميع داخل المشروع:

$ touch webpack.config.js

موضة

يحدد الوضع البيئة التي يعمل فيها المشروع حاليًا. الخاصية لديها الافتراضي none، ولكن يمكن ضبطها على أي منهما production or development، لكنك لن تستخدمها أبدًا none كوضع. في الواقع ، ما يحدث عندما يظل الوضع غير مضبوط ، يستخدم webpack production كخيار احتياطي للتحسين.

بدافع development تم تعيينه على أنه الوضع ، فنحن نستخدم تعيين المصدر بسهولة لاكتشاف الأخطاء ومعرفة مكان الملفات الأصلية.

بدافع production عند تعيينه على أنه الوضع ، تكون الأولوية لتقليص الملفات وتحسينها وتقليلها:

const path = require("path");

module.exports = {
  mode: "development", 
};

دخول

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

بالطبع ، في تطبيق صفحة واحدة ، سيكون هذا هو ملف فهرس JavaScript داخل ملف src المجلد ، وفي حالتنا ، هو src/index.js ملف:

const path = require("path");

module.exports = {
  
  entry: {
    main: path.resolve(__dirname, "src/index.js"),
  },
};

الناتج

أخيرًا ، كبداية ، سنحتاج أيضًا إلى إخراج للإعلان عن المكان الذي نريد إخراج الملفات والأصول والحزم وموارد التطبيق الأخرى بعد اكتمال عمليات تجميع التطبيقات. في حالتنا ، قمنا بتعيين path ليكون الإخراج هو dist المجلد ، ولكن يمكنك إعادة تسميته إذا كنت ترغب في ذلك ، ربما deploy, build، أو أي اسم تفضله.

نحتاج أيضًا إلى ضبط filename لتحديد اسم حزمة الإخراج. اصطلاح الاسم الشائع هو [name].bundle.js:

const path = require("path");

module.exports = {
  

  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "index.bundle.js", 
    
    
    filename: "[name].bundle.js", 
  },
};

لقد قمنا الآن بإعداد الحد الأدنى من التكوين المطلوب لتجميع تطبيق يمكننا تشغيله من خلاله package.json

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

ولكن قبل تشغيل build الأمر ، فلنقم بسرعة بتضمين بضعة أسطر من كود JavaScript في ملف src/index.js ملف:

console.log("Hello world! My name is Uche Azubuko.");

بعد ذلك ، نقوم بتشغيل webpack بالأمر التالي ، من المحطة:

$ yarn build
#
$ npm run build

هذا ينتج:

$ webpack
asset main.bundle.js 1.24 KiB [emitted] (name: main)
./src/index.js 54 bytes [built] [code generated]
webpack 5.75.0 compiled successfully in 98 ms
Done in 0.94s.

بشكل أساسي ، عندما نقوم بتشغيل ملف build أمر، webpack هو الأمر الذي يتم تشغيله تحت الغطاء ؛ سيتم قراءة إعدادات التكوين التي حددناها ونقطة الدخول ، أي app.js يتم تجميعها وقراءتها وإخراجها بتنسيق main.bundle.js في ال dist المجلد.

إذا واصلنا بناء نقاط مختلفة ، فسنحصل على أسماء مختلفة ، ولكن إذا قمنا بتعيين filename إلى [name].[contenthash].js، سنكون على يقين من الحصول على اسم فريد للملف المتوافق ، في كل مرة يتم فيها إكمال حزمة التطبيق الخاصة بنا.

الآن ، عندما نبني التطبيق مرة أخرى ، نحصل على اسم فريد للملف الذي يتم إخراجه في ملف dist مجلد ، مثل main.96f31f8d4c5ec9be4552.js:

$ yarn build
# Or
$ npm run build

هذا ينتج:

$ webpack
asset main.96f31f8d4c5ec9be4552.js 1.24 KiB [emitted] [immutable] (name: main)
./src/index.js 54 bytes [built] [code generated]
webpack 5.75.0 compiled successfully in 88 ms
Done in 0.92s.

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

وبالتالي ، فإن أفضل ما يجب فعله هو تنظيف ملف dist الدليل في كل مرة تكتمل فيها عملية تجميع التطبيقات.

يمكن تحقيق التنظيف عن طريق ضبط clean الخيار في output يعترض على true، بحيث webpack.config.js يتم تحديث:

const path = require("path");

module.exports = {
  mode: "development",
  entry: {
    main: path.resolve(__dirname, "src/index.js"),
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].[contenthash].js",
    clean: true,
  },
};

الآن ، في كل مرة نقوم فيها بتشغيل build الأمر dist يتم تنظيف الدليل أولاً قبل إرسال ملف جديد إليه.

لذلك هذا هو entry و output؛ مكان الحصول على ملفات التجميع ، ومكان وضع الملفات بعد التجميع.

هناك خياران رئيسيان آخران مع ملف التكوين يمكننا تضمينهما: loadersو plugins.

الإضافات

لرؤية الإضافات قيد التنفيذ ، سنستخدم امتداد HTMLWebpackPlugin مما يجعل من الممكن إنشاء ملفات HTML ديناميكيًا ، عن طريق تثبيت html-webpack-plugin صفقة:

$ yarn add --dev html-webpack-plugin
# Or
$ npm install --save-dev html-webpack-plugin

ثم في أقسام الملحقات من ملف التكوين ، نقوم بتمرير الامتداد title من ملف HTML الذي سيتم إنشاؤه ، وأ filename:

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  mode: "development",
  entry: {
    main: path.resolve(__dirname, "src/index.js"),
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].[contenthash].js",
    clean: true,
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: "Testing html file",
      filename: "index.html",
    }),
  ],
};

الآن ، عندما نقوم بتشغيل build الأمر ، يتم إنشاء ملف HTML في ملف dist مجلد. وفي index.html ملف ، ستلاحظ أن ملف js الملف الذي تم تجميعه تم إلحاقه تلقائيًا:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Testing html file</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"><script defer src="main.b908ea8ce529b415a20a.js"></script></head>
  <body>
  </body>
</html>

إذا كنت ترغب في إنشاء نموذج لاستخدامه كملف index.html الصفحة في dist مجلد ، يمكنك تحقيق ذلك عن طريق إرفاق ملف template الخيار في plugins خيار ملف التكوين ، ثم حدد ملف قالب في ملف src المجلد الذي سيكون قيمة ملف template الخيار:

module.exports = {
  

  plugins: [
    new HtmlWebpackPlugin({
      title: "Testing html file",
      filename: "index.html",
      template: path.resolve(__dirname, "src/template.html"),
    }),
  ],
};

ثم في template.html ملف ، يمكننا تحديد بعض الترميز. شيء واحد يجب ملاحظته هو أن ملف القالب هذا لديه حق الوصول إلى كل ما حددناه في ملف new HtmlWebpackPlugin كائن ، مثل title, filename، والتي يمكننا استيرادها إلى الملف:

// src/template.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
  </head>
  <body>
    <header>
      <h1>Template File of </h1>
    </header>
  </body>
</html>

الآن ، عندما نبني تطبيقنا مرة أخرى ، نحصل على العنوان الذي تم إنشاؤه dist/index.html ليكون "اختبار ملف html":

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Testing html file</title>
  <script defer src="main.b908ea8ce529b415a20a.js"></script></head>
  <body>
    <header>
      <h1>Template File of Testing html file</h1>
    </header>
  </body>
</html>

لوادر

بشكل افتراضي ، يتفهم webpack JavaScript و JSON (JavaScript Object Notation) ، لكنه لا يعرف ما هو ملف الصورة ، أو ملفات HTML ، أو CSS ، أو SASS ، أو SVG ، بما في ذلك الأنواع الأخرى من الملفات ؛ لا تعرف كيف تتعامل معها. بسبب هذا التحدي ، تأتي اللوادر.

إذا كان لديك ملفات HTML أو CSV أو SVG أو CSS أو SASS أو صور ، فيمكنك الحصول على برامج تحميل لجميع هذه الأنواع المختلفة من الملفات التي ستبحث في المجلد المصدر ، والعثور عليها ، ثم تحويلها إلى وحدات يمكن استيرادها بواسطة JavaScript.

دعونا نحصل على مثال نموذجي ، من خلال إرفاق ملف SVG هذا بامتداد src مجلد وملف CSS أيضًا. إذا أردنا إحضار ذلك وتجميعه جيدًا ، فسنستخدم أداة تحميل - لدينا index.js ملف ، شيئين يجب القيام بهما هنا ؛ ال index.js يعمل file كمحمل لتحميل نوع الملف ، ثم يتم استيراد هذا المُحمل إلى ملف dist الدليل عندما يتم تجميع التطبيق ، بحيث يصبح جزءًا من الرسم البياني للتبعية للتطبيق.

تحميل ملفات CSS باستخدام Webpack

يمكننا إنشاء ملف main.css في ال src المجلد:

// src/main.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ثم قم بالتحديث index.js:

import style from "./main.css";

console.log("Hello world! My name is Uche Azubuko!");

في مجلة loaders الخيار في ملف التكوين ، يمكننا الآن تعيين قواعد لتحميل أنواع مختلفة من الملفات كوحدات نمطية أثناء عملية التجميع:

module.exports = {
  

  module: {
    rules: [{ test: /.css$/, use: ["style-loader", "css-loader"] }],
  },
};

هنا ، أنشأنا قاعدة توفر مجموعة من برامج التحميل لتحميل أي ملفات CSS في ملف src مجلد؛ أن تقرأ من اليمين إلى اليسار. يبحث مُحمل CSS عن الملف ، ويحوله إلى وحدة نمطية ويعطيه إلى JavaScript ، بينما ملف style-loader يأخذ الوحدة المستوردة ، ويحقنها في ملف dist/index.html ملف.

إنها تبعيات dev ، وبالتالي ، يتعين علينا أيضًا تثبيتها في التطبيق:

$ yarn add --dev style-loader css-loader
# Or
$ npm install --save-dev style-loader css-loader

عندما نقوم بتشغيل ملف build الأمر ، فإن ملف JavaScript الناتج من عملية التجميع يعرف الآن عن ملف CSS ويحقنه في ملف dist التطبيق.

لنفترض أنك ترغب في تشغيل إصدار التطوير للتطبيق الخاص بك على المتصفح. أولاً ، نضيف خيارًا آخر إلى ملف scripts الكائن في package.json ملف:

"dev": webpack serve

الامر serve يضاف مع webpack. إنه يتوافق مع كل شيء ويحفظه في الذاكرة. في ملف التكوين ، نضيف بعد ذلك الخيارين: devtool و devServer. هذه هي الخيارات التي تساعد على جعل العمل على الخادم هو الأمثل.

أدوات التطوير

• devtool يتحكم خيار التكوين في كيفية إنشاء خرائط المصدر وما إذا كانت يتم إنشاؤها أثناء التجميع. يتتبع تعيين المصدر مصدر كل المحتوى ، ويجعل المتصفح يعرف مصدر أي خطأ محتمل:

module.exports = {
  

  devtool: "inline-source-map",
};

خادم التطوير

يحدد هذا الإعداد للخادم الذي نقوم بإعداده ، ونحدد من أين يجب تشغيل قاعدة التطبيق. نحدد أيضًا إعادة تحميل الوحدة الساخنة (HMR) باستخدام ملف hot الخيار ، اضبط رقم المنفذ حيث سيتم تشغيل التطبيق ، راقب التغييرات باستخدام watchFiles من خلال تحديد قيمته لـ src المجلد ، استخدم ملف open خيار لفتح المتصفح فورًا عند اكتمال عملية التجميع لبدء إصدار التطوير ، وتعيين رقم المنفذ الذي تختاره باستخدام port الخيار:

module.exports = {
  /* ... */

  devServer: {
    contentBase: path.resolve(__dirname, "dist"),
    port: 5001, // default is often 8080
    open: true,
    hot: true,
    watchFiles: [path.resolve(__dirname, 'src')],
  },
};

بالإضافة إلى المعرفة devServer الخيار ، نحتاج أيضًا إلى تثبيت ملف webpack-dev-server الحزمة باعتبارها ديف التبعية ، وهو ما يساعد.

الآن عندما نقوم بتشغيل dev الأمر ، يتم عرض التطبيق على المتصفح في localhost:5001، مع عرض كل المحتوى الذي تم حقنه في dist/index.html أثناء عملية التجميع:

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

تحميل الصور

الشيء الآخر الذي أصبح أسهل في الإصدار 5 من webpack هو المدمج في asset/resource أداة التحميل ، والتي يمكننا استخدامها للتحقق من الصور من أجل حقنها في التطبيق أثناء عملية التجميع:

module.exports = {
  

  module: {
    
    { test: /.(svg|ico|png|webp|jpg|gif|jpeg)$/, type: "asset/resource" },
  },
};

هنا ، قمنا بكتابة فحص للعثور على جميع الملفات المرتبطة بنوع الملف التالي وحقنها في ملف dist المجلد أثناء التجميع: svg، ico، png، webp، jpg، gif، jpeg.

تحديث src/index.html لتضمين ملف SVG الذي قمت بتنزيله مسبقًا:

import style from "./main.css";
import logo from "./logo.svg";

console.log("Hello world! My name is Uche Azubuko!");

الآن ، قم بتشغيل ملف dev الأمر ، ويجب الآن تجميع ملف SVG ويجب أن تكون عملية التجميع ناجحة.

عادة ، نريد استخدام SVG داخل ملف مكون. لذلك ، دعونا ننشئ ملف component.js ملف في src مجلد. هنا ، سننشئ وحدة من شأنها أن تستخدم لإنشاء محتوى على الصفحة:

import logo from "./logo.svg";

function component() {
  let main = document.createElement("main");
  let para = document.createElement("p");
  let img = document.createElement("img");
  main.append(para);
  para.append(img);
  img.src = logo;
  img.alt = "logo for the app";
  return main;
}

export default component;

لكي نستفيد من الصورة ، ستكون الخطوة الأولى هي استيرادها إلى الملف. ثم نحتاج أيضًا إلى استيراد ملف component.js ملف في index.js بحيث يمكن تجميعها وعرضها على DOM. المكون هو وظيفة تسمى وتعيد main الذي تم إرجاعه في component.js ملف ، ثم يتم حقنه في جسم DOM:

import style from "./main.css";
import logo from "./logo.svg";
import component from "./component";

console.log("Hello world! My name is Uche Azubuko!");

document.body.append(component());

الآن ، عندما نقوم بتشغيل خادم dev مرة أخرى ، يجب أن يكون لدينا ملف SVG معروضًا الآن على DOM:

إذا كنا نرغب في أن تحتفظ صورنا المجمعة بأسمائها الأصلية بعد اكتمال التجميع ، في webpack.config.js، يمكننا أن نضع assestModuleFilename أن تكون "[name][ext]" في ال output الخيار:

output: {
  path: path.resolve(__dirname, "dist"),
  filename: "[name].[contenthash].js",
  clean: true,
  assetModuleFilename: "[name][ext]",
},

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

النقل

غالبًا ما تكون فكرة جيدة أن تقوم بتحويل التعليمات البرمجية إلى إصدارات أقدم من ES5 حتى تتمكن المتصفحات القديمة من فهم الكود الخاص بك ، بالإضافة إلى المتصفحات الأحدث التي تستخدم ES6 و ES7. لتحقيق ذلك ، نستخدم أداة Babel.

الآن ، نقوم بتضمين قاعدة تبحث عن جميع ملفات JavaScript في ملف src المجلد باستثناء ملف node_modules المجلد ، ثم نقلها باستخدام ملف babel-loader الذي يستخدم @babel/core وسيتم تثبيته على أنه تبعية مطور ، جنبًا إلى جنب مع إعداد presets خيارات ل @babel/preset-env.

أولاً ، دعنا نثبت الحزم المطلوبة:

$ yarn add --dev babel-loader @babel/core @babel/preset-env
# Or
$ npm install --save-dev babel-loader @babel/core @babel/preset-env

module.exports = {
  

  module: {
    
    {
      test: /.js$/,
      exclude: /node_modules/,
      use: {
        loader: "babel-loader",
        options: { presets: ["@babel/preset-env"] },
      },
    },
  },
};

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

وفي الختام

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

حتى لو كنت تستخدم أدوات مثل vue-create لإنشاء مشروع Vue أو create-react-app لإعداد تطبيق React ، الحقيقة هي أنهم يستخدمون webpack خلف الكواليس.

ليس من الصعب فهم Webpack حقًا ، ومن هذا الدليل ، سيكون من الرائع بالنسبة لك توسيع نطاق تعلمك لمعرفة كيفية العمل مع SASS و PostCSS في حزمة الويب وتحسين الإنتاج. إذا وجدت صعوبة في التواصل معي ، فسيسعدني تقديم المساعدة.

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

يمكنك الرجوع إلى جميع التعليمات البرمجية المصدر المستخدمة في هذا الدليل على جيثب.

مصادر إضافية