Webpack

Webpack
מפתח	Tobias Koppers
מחזור חיים	10 במרץ 2012 – הווה (12 שנים)
גרסה אחרונה	5.95.0 (25 בספטמבר 2024)
גרסת בטא	5.71.0 ; ב־1 באפריל 2022
מערכת הפעלה	חוצה-פלטפורמות
נכתבה בשפות	JavaScript
סוג רישיון	רישיון MIT
קוד מקור	https://github.com/webpack/webpack
	Linux, macOS, Windows
	webpack.js.org

Webpack הוא מאגד מודולים חינמי בקוד פתוח עבור ספריות ג'אווה סקריפט. הוא מיועד בעיקר לג'אווה סקריפט, אבל ניתן לעשות בו שימוש לצורך כל סוגי הקבצים המשמשים לפיתוח בצד הלקוח כולל HTML‏ CSS ותמונות, אם כלולות החבילות המתאימות.

שימושים

Webpack אוסף מודולים חיצוניים ומייצר מהם קבצים מקומיים המייצגים אותם, ומאפשר לעשות בהם שימוש ללא ייבוא בפועל של המודולים שנמצאים בשימוש.

Webpack מייצר גרף תלות המאפשר למפתחי אינטרנט להשתמש בשיטה מודולרית למטרות פיתוח יישומי האינטרנט שלהם.

Node.js נדרש לשימוש ב-webpack.

שתי טכניקות דומות נתמכות על ידי webpack כשמדובר בפיצול קוד דינמי. הגישה הראשונה והמומלצת היא להשתמש בתחביר import() התואם את תקן ה-ECMAScript עבור ייבוא דינמי. הגישה הפחות מומלצת, היא להשתמש בתחביר require שנמצא בשימוש בעיקר ב-CommonJS.

Webpack מציעה גם שרת מקומי, לצורכי פתוח, המאפשר ניפוי שגיאות בזמן אמת. בשילוב של Babel ניתן גם לכתוב קוד בתקן מודרני שאינו נתמך בדפדפנים ישנים, ולקבל בסוף קובץ של קוד הנתמך בכמעט כל הגרסאות של הדפדפנים.

הגדרות

המודול מופעל משורת הפקודה בפקודה webpack. ניתן להוסיף הגדרות שונות באמצעות הוספת דגלים (flags), או שניתן להגדיר אותו באמצעות קובץ תצורה ששמו webpack.config.js. קובץ זה מגדיר כללים, תוספים וכו' עבור פרויקט בו הוא נמצא. באמצעות הקובץ האמור webpack ניתנת להרחבה באמצעות כללים המאפשרים למפתחים לכתוב משימות מותאמות אישית שהם רוצים לבצע בעת חיבור קבצים יחד. בכדי למנוע בעיות מטמון של הדפדפן שיגרמו לאי רענון לקובץ החדש ניתן להוסיף גיבוב ליניארי לשם הקובץ בכל פעם שהמודול רץ.

להלן דוגמה לקובץ הגדרות:

const path = require("path");//here you must use require syntax

module.exports = {
  mode: "development", //you can chhose "prodoction" when building for production or add to the build script "webpack --mode production"
  entry: {
    bundle: path.resolve(__dirname, "src/index.js"), //here we make it should choose "bundle" for the filename you can choose what ever you would like
  },
  output: {
    path: path.resolve(__dirname, "dist"), //choose the folder name for builded files, here i choosed "dist"
    filename:
      "[name].js" /*you can use instead "[name].[contenthash].js" to add hash to file to help for caching,
                               you can even specify the name instead for example "bundle.[contenthash].js */,
    clean: true, //in case of hashing which cretas new file every time you need to add this line to clean the old file every time
    assetModuleFilename: "[name][ext]", //for images
  },
  devtool: "source-map", //create source map if wanted - helps debog the code
  devServer: {
    //all the settings for dev server
    static: {
      directory: path.resolve(__dirname, "dist"),
    },
    port: 3001,//deafault port if no specifacion is 8080
    open: true,
    hot: true,
    compress: true,
    historyApiFallback: true,
  },
  module: {
    rules: [
      {
        //rule for scss files compiled throgh webpack
        test: /\.scss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        //rule for using babel to compile for old browser versions
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
          },
        },
      },
      {
        //rule for imag compiling
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: "asset/resource",
      },
    ],
  },
  plugins: [],
};