Webpack وإضافة ملف script.js لكتابة شيفرات جافا سكريبت

الهدف من الـwebpack هو أن تقسم الملفات كيفما تشاء، تريد كتابة كل شيء في index.js ؟ يمكنك ذلك، تريد فصله إلى ملف آخر ؟ يمكنك ذلك وحينها تقوم بـimport لهذا الملف من الـindex.js هكذا:

import {func1} from "./script.js"

حيث script.js موجودة في نفس مجلد index.js معرفة هكذا:

export function func1(){
    // code
}

لاحظ تعليمة export وهي تجعل استخدام func1 خارج ملف script.js ممكناً، يمكنك تعريف توابع من دون export وحينها تكون private فقط ملف script.js يستطيع استخدامها.

يمكنك أيضاً وضع script.js داخل مجلد مثلاً util وعندها يكون الكود في index.js هكذا:

import {func1} from "./util/script.js"

بالطبع يمكن لـscript.js أن يقوم بعملية import هو اﻵخر.

ما يفعله الـwebpack هو تتبع كل عمليات import من index.js ليصل إلى قائمة ملفات، هذه الملفات قد تقوم بعملية import أيضاً والـwebpack يقوم بتتبعها حتى نصل إلى شجرة ملفات، بعدها بشكل افتراضي يقوم webpack بتجميعها إلى ملف واحد يمكن ضمه بسهولة إلى ملف html بالطريقة المعروفة.

بالطبع الـwebpack مقدراته أكبر من ذلك بكثير ﻷنه يقوم بعمل minification للكود كما يقوم بحذف التوابع الغير مستخدمة لسبب ما وأمور أخرى كثيرة. بصراحة مقدراته تستحق كتاباً بحد ذاته.