جافاسكريبت - كيفية العثور على الأجزاء لإدخال Webpack

أَنا أَستخدم webpack لتحديث تطبيق ASP.NET Web Forms متعدد الصفحات قديم. لقد حققت نجاحًا جيدًا معه حتى حاولت استخدام SplitChunksPlugin لإزالة التكرار من حزمتي باستخدام خياره chunks: 'all'. للأسف، هذا ينتج عددًا من حزم JavaScript الإضافية التي يجب تضمينها جميعًا في وسوم script إلى جانب حزمة الدخول الأصلية. وليس من المفاجئ أن الوثيقة المرتبطة أعلاه تذكر ذلك:

بشكل افتراضي، يؤثر [المكون الإضافي] فقط على الأجزاء عند الطلب، لأن تغيير الأجزاء الأولية سيؤثر على علامات السكربت التي يجب أن يتضمنها ملف HTML لتشغيل المشروع.

لكنني أود جدًا أن يتم تقسيم تلك القطع الأولية للدخول، لذلك أحاول إيجاد طريقة للحصول على جميع تلك القطع الإضافية مضمنة في وسوم السكربت. يبدو أن النصيحة القياسية هنا هي استخدام HtmlWebpackPlugin لتوليد صفحة HTML مع تضمين جميع وسوم السكربت، لكن هذا لا يعمل بالنسبة لي (على الأقل في تكوينه الافتراضي) لسببين على الأقل:

1. هذا مشروع نماذج ويب. لا يمكن ببساطة العبث بملفات aspx.
2. حتى لو وجدت طريقة لتوليد بعض ملفات aspx صالحة في كل مرة أشغل فيها webpack (أفترض أن ذلك ممكن، لكن هنا تكمن الصعوبة الرئيسية)؛ يبدو أن HtmlWebpackPlugin يولد فقط وسوم السكريبت لجميع القطع، أو لمجموعة مختارة يدويًا منها (باستخدام الخيار chunks: []).

لتوضيح تلك النقطة الثانية والوصول إلى سؤالي - يمكنني إجراء بعض التحليل اليدوي للأجزاء المفرقة لبناء رسم بياني للترابط وإدراج كل جزء يدوياً في ملف aspx، لكن من الواضح أن هذا ليس نهجاً قابلاً للصيانة. كنت آمل أن يوفر HtmlWebpackPlugin طريقة على الأقل للإشارة إلى أن هذا الجزء يتم استخدامه في النهاية بواسطة هذا المدخل، أو أن هذا المدخل يستخدم هذه الأجزاء، إلخ، لكنني لم أجد أي مثل هذه العلاقات موجودة في مخرجاته.

هل هناك أي طريقة دون المرور بعقبات الاختراق لتحديد تلقائيًا أي من الأجزاء المقسمة هي تبعيات لقطعة إدخال معينة؟

الإجابة رقم 1

قم بتثبيت هذه الإضافة مع خيار على إعدادات webpack الخاصة بك:

npm install webpack-manifest-plugin --save-dev

// webpack.config.js

const ManifestPlugin = require('webpack-manifest-plugin')

concatMerge(configuration, {
  // ...
  plugins: [
    new ManifestPlugin({
      fileName: 'prod.manifest.json',
      generate: (seed, files) => {
        const entrypoints = new Set()
        files.forEach(
          (file) => ((file.chunk || {})._groups || []).forEach(
            (group) => entrypoints.add(group)
          )
        )
        const entries = [...entrypoints]
        const entryArrayManifest = entries.reduce((acc, entry) => {
          const name = (entry.options || {}).name
            || (entry.runtimeChunk || {}).name
          const files = [].concat(
            ...(entry.chunks || []).map((chunk) => chunk.files)
          ).filter(Boolean)
          return name ? {...acc, [name]: files} : acc
        }, seed)
        return entryArrayManifest
      }
    }),
  ],
}

سيولد ملف prod.manifest.json يحتوي على أجزاء لكل إدخال أو مسار:

{
  "entryOne": [
    "main.common.d7791ce7a1e7ba394.css",
    "main.common.d7791ce7a1e7ba394.js",
    "main.entryOne.eb614be915641d465.js"
  ],
  "a-route": [
    "main.common.d7791ce7a1e7ba394.css",
    "main.a-routes.14b91be915641d465.js"
  ]
  // ...
}

الإجابة رقم 2

بشكل أبسط، للحصول على نفس النتيجة مثل @Junior Tour يمكنك أيضًا استخدام معامل entries لخاصية generate:

plugins: [
    new WebpackManifestPlugin(
    {
        fileName: 'prod.manifest.json',
        generate: (seed, files, entries) => {
            return entries;
        }
    }),
],