webpack logo

bundle your
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",
  },
};

تفضّل شرحًا بالفيديو؟ Without config

page.html

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

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

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

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

Support the Team

Through contributions, donations, and sponsorship, you allow webpack to thrive. Your donations directly support office hours, continued enhancements, and most importantly, great documentation and learning material!

Latest Sponsors

 

 

 

Platinum Sponsors

 

 

 

Gold Sponsors

 

 

 

Silver Sponsors

 

 

 

Bronze Sponsors

 

 

 

Backers