شعار webpack

حزّم
assets scripts

تثبيت webpack

npm install --save-dev webpack webpack-cli

اكتب الكود

src/index.js

import bar from "./bar.js";

bar();

src/bar.js

export default function bar() {
  //
}

حزّمه

ابدأ بدون ملف configuration، أو استخدم ملف webpack.config.js مخصصًا:

import path from "node:path";
import { fileURLToPath } from "node:url";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
};

تفضّل شرحًا بالفيديو؟ بدون ملف configuration

page.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    ...
  </head>
  <body>
    ...
    <script src="dist/bundle.js"></script>
  </body>
</html>

بعدها شغّل webpack من سطر الأوامر لإنشاء ملف bundle.js.

ممتاز، أليس كذلك؟ لنبدأ.

ابدأ بسرعة من قسم البدء، أو انتقل إلى قسم المفاهيم إذا أردت فهم الأفكار الأساسية التي يعتمد عليها webpack بصورة أوسع.

ادعم الفريق

من خلال المساهمات والتبرعات والرعاية، تساعد webpack على الاستمرار والتطور. تبرعاتك تدعم ساعات العمل المفتوحة، والتحسينات المستمرة، والأهم من ذلك توثيقاً ومواد تعلم أفضل.

أحدث الرعاة

 

 

 

رعاة Platinum

 

 

 

رعاة Gold

 

 

 

رعاة Silver

 

 

 

رعاة Bronze

 

 

 

الداعمون