قوالب html webpack5 التي تحتوي على أجزاء لا تعمل مع "npm run dev"

عبد النور محمد · 4 سبتمبر 2021

أود استخدام قوالب html التي يقدمها webpack عبر HtmlWebpackPlugin. تبدو قوالب html كما يلي:

<!DOCTYPE html>
[...]
<body>
    <h1 class="text-red-600">Test: include HTML partial with standard lodash functionality</h1>
    <%= require('./partials/header').default %>
</body>
</html>

header.html

<h2>Header in H2 as Test</h2>

webpackconfig

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

module.exports = {
 module {
  rules: [
   {
    test: /\.html$/,
    exclude: /node_modules/,
    use: ['html-loader']
   }
  ]
 },
 plugins: [
  new HtmlWebpackPlugin({
   filename: 'index.html',
   template: './src/templates/index.html',
  })
 ]
}

عند تشغيل

npm run dev

أحصل على

Cannot Get /

سامح أشرف · 4 سبتمبر 2021

أولًا يجب عليك التأكد من أنك قمت بتثبيت html-loader بشكل سليم، يمكنك أن تقوم بتثثبيته من خلال الأمر التالي:

npm i html-loader --save-dev

كما يجب تعديل ملف webpack.config.js وإضافة الخاصية entry، كالتالي:


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

module.exports = {
  mode: "development",
  entry: path.resolve(__dirname, 'src') + '/index.js',
  module: {
    rules: [
      {
        test: /\.html$/,
        exclude: /node_modules/,
        use: ['html-loader']
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: './src/templates/index.html',
    })
  ]
}

في حالة تشغيل الخادم إستمرار المشكلة فستجد رسالة خطأ في سطر الأوامر، توضح سبب المشكلة، أرجو إرفاقها إن وجدت.

قوالب html webpack5 التي تحتوي على أجزاء لا تعمل مع "npm run dev"

السؤال

عبد النور محمد

رابط هذا التعليق

شارك على الشبكات الإجتماعية

1 جواب على هذا السؤال

Recommended Posts

سامح أشرف

رابط هذا التعليق

شارك على الشبكات الإجتماعية

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية