شعار webpack

HtmlWebpackPlugin

يسهّل HtmlWebpackPlugin إنشاء ملفات HTML التي تحمل bundles الناتجة من webpack. هذا مفيد خصوصًا عندما تحتوي أسماء ملفات bundles على hash يتغير مع كل عملية بناء. يمكنك ترك plugin ينشئ ملف HTML لك، أو تمرير قالب خاص بك باستخدام lodash templates، أو استخدام loader من اختيارك.

التثبيت

npm install --save-dev html-webpack-plugin

الاستخدام الأساسي

ينشئ plugin ملف HTML5 يحتوي كل webpack bundles داخل عنصر body باستخدام وسوم script. أضف plugin إلى إعدادات webpack بهذه الطريقة:

import path from "node:path";
import { fileURLToPath } from "node:url";
import HtmlWebpackPlugin from "html-webpack-plugin";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default {
  entry: "index.js",
  output: {
    path: path.resolve(__dirname, "./dist"),
    filename: "index_bundle.js",
  },
  plugins: [new HtmlWebpackPlugin()],
};

سينشئ ذلك ملف dist/index.html بالمحتوى التالي:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>webpack App</title>
  </head>
  <body>
    <script src="index_bundle.js"></script>
  </body>
</html>

إذا كان لديك أكثر من webpack entry point، فستُضاف كلها إلى ملف HTML الناتج باستخدام وسوم <script>.

إذا كانت مخرجات webpack تحتوي CSS assets، مثل CSS المستخرج باستخدام MiniCssExtractPlugin، فستُضاف هذه الملفات إلى عنصر <head> في HTML الناتج باستخدام وسوم <link>.

الإعدادات

للاطلاع على كل خيارات الإعداد، راجع توثيق plugin.

إضافات الطرف الثالث

يدعم plugin إضافات خارجية. للاطلاع على القائمة، راجع التوثيق.

·تعديل هذه الصفحة
السابق ›
ChunksWebpackPlugin
‹ التالي
SvgChunkWebpackPlugin

1 مساهم

RlxChap2