קורס המדריך המלא ל Webpack 4 שיעור טעינת קבצים ששמם לא ידוע עם Context

דיונים מקורסים
#1
זה נושא דיון מלווה לערך המקורי ב- https://www.tocode.co.il/bundles/webpack/lessons/context
#2

שאלה כללית.
החל מwebpack 5 . יש חובה לשים איזה סוג של devtool אני רוצה (בשביל לקבל את הsourcemap במצב development).
לדוגמא כשאני מריץ:

npx webpack-dev-server -d source-map

השאלה היא באיזה סוג של source-map כדאי להשתמש - בוא נאמר , מה מקביל לdefault של webpack 4 [בהנחה ואני צריך את ההשוואה לsource-code ומידע סביר שיעזור לי להבין שגיאות זמן ריצה או בעיות מבנה בקוד] ואולי בקטנה על ההבדלים ביניהם… ניסיתי להבין מdocumentation של webpack אבל קצת איבדתי את זה…

#3

הפתרון שלי לתרגיל בסוף הוידאו של webpack-4-context
אני מפספס משו? כי לא הייתי צריך להשתמש בchacheGroups …

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

module.exports = {
  mode: 'development',
  entry: {
    app: './src/main.js',
    buttons:["./src/colored_buttons/red.js","./src/colored_buttons/green.js","./src/colored_buttons/blue.js"]
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
    clean:true,
  },
  optimization:{
    runtimeChunk:"single",
  },
  plugins: [
    new HtmlWebpackPlugin(),
  ],
};

מה שמחזיר את המבנה הבא בתיקיית dist:

.
├── app.js
├── buttons.js
├── index.html
└── runtime.js
#4

הי למצב פיתוח כדאי להשתמש ב eval-source-map, לדוגמה קובץ הגדרות מלא לפיתוח ריאקט יכול להיראות כך:

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

module.exports = {
  entry: './src/index.js',
  mode: 'development',
  devtool: 'eval-source-map',
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-react'],
          }
        }
      }
    ]
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'index_bundle.js',
  },
  plugins: [new HtmlWebpackPlugin()],
};

במצב ייצור אפשר פשוט לוותר על האופציה והכל יהיה בסדר

#5

לגבי הפיתרון לחידה מסוף השיעור - נכון באמת אפשר להשתמש גם ב Entry Points וגם ב Cache Groups כדי לפתור אותו. ובמקרה הפשוט הזה קשה לראות את ההבדל.

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