درس نهم: ساخت Template برای فایل‌های HTML

در قسمت قبل یاد گرفتیم که چطور فایل های HTML خود را شخصی سازی کنیم اما می توانیم پا را یک قدم فراتر گذاشته و یک قالب یا template برای فایل های HTML خود تعریف کنیم. اگر به صفحه رسمی پلاگین html-webpack-plugin در گیت هاب بروید، در قسمت options گزینه ای به نام template پیدا خواهید کرد. در این قسمت لینکی به documentation آن موجود است که برای آشنایی با این قابلیت باید به آن بروید.

در این صفحه documentation موتورهای template خاصی وجود دارد که می توانید از هر کدام از آن ها استفاده کنید. من در این جلسه از موتور handlebars استفاده می کنم چرا که آن را به بقیه موتورها ترجیح می دهم اما شما می توانید از هر کدام که خواستید استفاده کنید. در واقع هر زمان که می خواهید درون جاوا اسکریپت از کدهای HTML استفاده کنید، باید یک Template engine مانند handlebars داشته باشید که این کار را برایتان انجام بدهد. برای شروع استفاده از handlebars باید ابتدا درون پوشه src یک فایل با پسوند hbs ایجاد کنیم. من نام این فایل را index.hbs می گذارم و محتوای زیر را درون آن قرار می دهم:

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="{{htmlWebpackPlugin.options.description}}">
    <title>{{htmlWebpackPlugin.options.title}}</title>
</head>
<body>

</body>
</html>

همانطور که می بینید، خصوصیاتی که درون فایل webpack.config.js برای پلاگین webpack html plugin تعریف کرده بودیم، از این قسمت در دسترس هستند. مثلا برای دسترسی به title باید بگوییم htmlWebpackPlugin.options.title انگار که در حال دسترسی به یک شیء جاوا اسکریپتی هستیم. شاید در ابتدا این کد برایتان عجیب باشد. حق با شماست ولی برای استفاده از handlebars باید documentation آن را مطالعه کرده و آن را یاد بگیرید. البته هیچ الزامی در استفاده از این امکانات نیست اما من برای اینکه انواع قابلیت های Webpack را به شما آموزش بدهم باید این مسائل را ذکر کنم. به طور مثال شاید برایتان سوال پیش بیاید که ما description را برای htmlWebpackPlugin.options.description تعریف نکرده ایم، بنابراین زمانی که Webpack را اجرا کنیم چه اتفاقی برای آن می افتد؟ جواب این است که Webpack به شما خطا نخواهد داد، بلکه به سادگی این قسمت را خالی می گذارد، یعنی تگ meta از نوع description به شکل زیر در فایل html شما ایجاد خواهد شد:

    <meta name="description" content="">

شاید بپرسید، از کجا باید چنین چیزی را بدانم؟ طبیعتا مانند هر تکنولوژی دیگری باید از طریق Documentation و آزمون و خطا با این موارد آشنا بشوید. مثلا در صفحه documentation لیست انواع template engine ها به شکل زیر آمده است:

علامت سه نقطه یعنی شما می توانید از هر template engine دیگری نیز استفاده کنید، به شرط اینکه loader آن برای webpack نوشته شده باشد. مثال خود documentation از نحوه استفاده از این پلاگین به شکل زیر است:

{
  module: {
    loaders: [
      {
        test: /\.hbs$/,
        loader: 'handlebars-loader'
      },
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.hbs'
    })
  ]
}

اگر متوجه آن نمی شوید جای نگرانی نیست. در همین پروژه از کد های خودمان استفاده می کنیم تا مثال بالا را بهتر درک کنید.

برای استفاده از فایل hbs ای که بالاتر نوشتیم، باید دوباره به webpack.config.js برویم و کد های زیر را در قسمت plugins اضافه کنیم:

    plugins: [
        new TerserPlugin(),
        new MiniCssExtractPlugin({
            filename: 'styles.[contenthash].css'
        }),
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title: 'Hello World',
            description: 'your description here',
            template: 'src/index.hbs'
        })
    ]

در همین ابتدا خصوصیت description را اضافه کرده ام و بعدا برایتان تا فایل index.hbs به این خصوصیت دسترسی داشته باشد. سپس خصوصیت template را اضافه کرده ام و مقدار آن را برابر با آدرس فایل hbs خود قرار داده ام. از آنجایی که یک فرمت جدید (hbs) را به webpack داده ایم باید به آن یاد بدهیم که چطور با چنین فرمتی رفتار کند. همانطور که قبلا هم گفتم webpack برای فایل های جاوا اسکریپت ساخته شده است و اگر فایلی غیر از پسوند js را در نظر بگیرید، باید نحوه استفاده از آن را به Webpack یاد بدهیم. بر همین اساس یک rule دیگر در قسمت module می نویسیم:

            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/env'],
                        plugins: ['transform-class-properties']
                    }
                }
            },
            {
                test: /\.hbs$/,
                use: {
                    'handlebars-loader'
                }
            }

همانطور که می بینید گفته ام برای فایل هایی که پسوند hbs دارند از loader جدیدی به نام handlebars-loader استفاده کن. البته این loader در حالت پیش فرض در webpack موجود نیست بنابراین باید آن را نصب کنیم. یک پنجره ترمینال را باز کرده و دستور زیر را در آن تایپ نمایید:

npm install handlebars-loader handlebars --save

در صفحه documentation ذکر شده است که اگر هیچ loader ای را برای Template engine مشخص نکنید، از loader پیش فرضی به نام ejs-loader استفاده خواهد شد که متعلق به Template engine استفاده شده در LoDash و ... است و برای شما مشکلات فراوانی ایجاد می کند بنابراین همیشه سعی کنید loader مناسب به template engine خود را استفاده کنید.

حالا می توانیم پس از ذخیره کردن فایل ها، دستور npm run build را اجرا کنیم. بعد از اجرای این دستور به پوشه dist بروید. اگر فایل index.html ای که درون پوشه dist ایجاد شده است را باز کنید، می بینید که برنامه دقیقا از Template ما پیروی کرده و فایل html ما را به راحتی ساخته است:

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="your description here">
    <title>Hello World</title>
    <link rel="stylesheet" href="style.1d756s459g756a526g.css">
</head>

<body>

    <script type="text/javascript" src="bundle.c258s53658g7365koptwv.js"></script>
</body>

</html>

به همین راحتی فایل html خود را با قالب مورد نظرمان ایجاد کرده ایم.

اگر به دنبال پلاگین های بیشتری برای webpack هستید می توانید به قسمت plugins از وب سایت رسمی webpack و همچنین لیست بالا بلندی به نام awesome-webpack در گیت هاب مراجعه کنید. همچنین همیشه قابلیت جست و جو در گوگل را خواهید داشت.

درس نهم: ساخت Template برای فایل‌های HTML

Building Templates for HTML Files