دعونا نتحدث عن كيفية ضغط وتجميع موارد HTML في حزمة الويب

لماذا تحتاج إلى حزم موارد html؟

عند كتابة التعليمات البرمجية، يتم تقديم ملف js ضمن src بعد تعبئة حزمة الويب، ويتم إنشاء ملف إدخال في هذا الوقت، ويكون اسم ومسار ملف js في html خاطئًا يجب حزمه ويجب حزم ملف html. تم استبدال المسار إلى ملف js المستورد.

فوائد استخدام webpack لحزم html هي:

(1) يمكن إدخال ملف js المعبأ تلقائيًا إلى html

(2) بعد حزم html، سيتم إنشاؤه في مجلد البناء وتجميعه مع ملف js المعبأ، لذلك عندما نتصل بالإنترنت، ما عليك سوى نسخ المجلدات التي تم إنشاؤها عن طريق الحزم إلى البيئة عبر الإنترنت

(3) سيساعدنا ذلك في ضغط ملفات html.

كيفية ضغط موارد html وتعبئتها في حزمة الويب

1. قم بتثبيت البرنامج الإضافي

Webpack محليًا يمكنه فهم ملفات JS وJSON فقط، ويجب أن يدعم تعبئة الملفات الأخرى. تحتاج جميع أنواع الملفات إلى تثبيت البرنامج الإضافي أو المُحمل المطابق.

إذا أردنا حزم ملفات HTML، نحتاج أولاً إلى تثبيت المكون الإضافي html-webpack-plugin :

npm install html-webpack-plugin -D

دور هذا المكون الإضافي:

• إنشاء ملف html ضمن التصدير افتراضيًا، ثم قم باستيراد جميع موارد JS/CSS.

• يمكنك أيضًا تحديد ملف html بنفسك وإضافة موارد إلى ملف html هذا.

2. تكوين Webpack.config.js

بعد تثبيت المكون الإضافي html-webpack-plugin قم بتكوينه في ملف webpack.config.js :

// ...
 // 1. تقديم المكوّن الإضافي const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 وحدة التصدير = {
   // ...
   // 2. تكوين المكونات الإضافية في المكونات الإضافية: [
     جديد HtmlWebpackPlugin({
       القالب: 'index.html'، // حدد ملف قالب الإدخال (بالنسبة إلى الدليل الجذر للمشروع)
       اسم الملف: 'index.html'، // حدد اسم ملف الإخراج وموقعه (بالنسبة إلى دليل الإخراج)
       // بالنسبة لعناصر التكوين الأخرى للمكون الإضافي، يمكنك عرض الوثائق الرسمية للمكون الإضافي})
   ]
 }

رابط التكوين التفصيلي: https://www.npmjs.com/package/html-webpack-plugin

تأكد من أن المسار واسم الملف لملف قالب الإدخال متوافقان مع التكوين، ومن ثم يمكنك التجميع.

3. عند تكوين إدخالات JS متعددة ومواقف HTML متعددة

، يجب تجميع ملفات HTML المتعددة، وتحتاج الملفات إلى استيراد ملفات JS مختلفة، ومع ذلك، يمكن لملف HTML chunk استيراد جميع ملفات JS المجمعة المحدد لتوزيع JS.

مسار ثابت = يتطلب('مسار');
 // 1. تقديم المكوّن الإضافي const HtmlWebpackPlugin = require('html-webpack-plugin');
 وحدة التصدير = {
   // ...
   // 2. تكوين إدخال JS (إدخالات متعددة)
   الإدخال: {
     البائع: ['./src/jquery.min.js'، './src/js/common.js']،
     الفهرس: "./src/index.js"،
     عربة التسوق: './src/js/cart.js'
   },
   // تكوين مخرجات التصدير: {
     اسم الملف: '[اسم].js'،
     المسار: path.resolve(__dirname, 'build/js')
   },
   // 3. تكوين المكونات الإضافية: [
     جديد HtmlWebpackPugin({
       القالب: "index.html"،
       اسم الملف: "index.html"،
       // استخدم القطعة لتحديد ملفات JS المراد استيرادها: ['index', 'vendor']
     }),
     // كم عدد ملفات HTML التي يجب تجميعها، وكم عدد المكونات الإضافية الجديدة المطلوبة new HtmlWebpackPlugin({
       القالب: "./src/cart.html"،
       اسم الملف: 'cart.html'،
       القطعة: ["عربة التسوق"، "البائع"]
     })
   ]
 }

نصيحة: ما يجب ملاحظته هنا هو عدد ملفات HTML التي تحتاج إلى تجميعها، وعدد المرات التي تحتاج فيها إلى HtmlWebpackPlugin الجديد.

بعد تجميع التكوين أعلاه بنجاح، يكون الإخراج كما يلي:

build
 |__ Index.html # تقديم Index.js وeller.js
 |__ cart.html # تقديم cart.js وeller.js
 |__ شبيبة
      |__ بائع.js # تم الإنشاء بواسطة jquery.min.js وcommon.js |__ فهرس.js # تم الإنشاء بواسطة فهرس.js |__ cart.js # تم الإنشاء بواسطة cart.js لموارد

html المضغوطة والمعبأة مثال

1، webpack. تكوين js

const HTMLWebpackPlugin = require('html-webpack-plugin')
...
 الإضافات: [
    // html-webpack-plugin تكوين تعبئة html سيقوم هذا المكون الإضافي بإنشاء ملف HTML5 لك new HTMLWebpackPlugin({
      القالب: "./index.html"، // المسار النسبي أو المطلق المعبأ في القالب (هدف التغليف)
      العنوان: 'الصفحة الرئيسية'، // العنوان المستخدم لتجزئة مستند HTML الذي تم إنشاؤه: صحيح، // صحيح يُلحق تجزئة حزمة الويب الفريدة لجميع البرامج النصية وملفات CSS المضمنة. تستخدم بشكل رئيسي لمسح ذاكرة التخزين المؤقت،
      تصغير: { // ضغط html
        انهيار Whitespace: صحيح، // طي المسافة البيضاء keepClosingSlash: صحيح، // إبقاء الفجوات المغلقة RemoveComments: صحيح، // إزالة التعليقات RemoveRedundantAttributes: true، // إزالة السمات الزائدة RemoveScriptTypeAttributes: true، // إزالة سمات نوع البرنامج النصي RemoveStyleLinkTypeAttributes: true، // حذف سمة نوع رابط النمط useShortDoctype: true، // استخدم نوع المستند القصير keepLineBreaks: true، // الحفاظ على فواصل الأسطر minifyCSS: true، // ضغط css في النص
        minifyJS: صحيح، // ضغط js في النص
      }
    }),
  ]،
...

2. في هذا الوقت، لدينا ملف Index.html

<!DOCTYPE html>
<html لانج = "">
  <الرأس>
    <ميتا محارف = "utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>webpackDemo</title>
  </الرأس>
  <الجسم>
    <div معرف = "التطبيق">
      تكوين حزمة HTML</div>
  </الجسم>
</html>

3. في الوقت الحالي، يقوم ملف Index.js

باستيراد "./../css/index.less"

إضافة وظيفة (س، ص) {
 العودة س+ص
}
console.log(add(2,3));

3. اكتب الحزمة في حزمة الويب لوحدة التحكم واكتشف أن ملف إخراج الحزمة يحتوي على ملف Index.html إضافي، والمحتوى كما يلي

<!DOCTYPE html>
<html لانج = "">
  <الرأس>
    <ميتا محارف = "utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>webpackDemo</title>
  <script defer src="index.js"></script></head>
  <الجسم>
    <div معرف = "التطبيق">
      تكوين حزمة HTML</div>
  </الجسم>

يتم <script defer="" src="index.js"></script>

</html>

المتصفح لفتح ملف Index.html الناتج المعبأ، وقد وجد أن النمط له تأثير وتحكم الوحدة تنتج أيضًا بشكل طبيعي: