वेबपैक के साथ GrapesJS को कैसे कॉन्फ़िगर करें (पूरी गाइड 2026)

GrapesJS के लिए वेबपैक कॉन्फ़िगरेशन क्यों

GrapesJS एक JavaScript बंडल और एक स्टाइलशीट भेजता है। केवल एक चीज जो वेबपैक की जरूरत है यह जानने के लिए कि सीएसएस आयात को कैसे संभालना है; JavaScript बिना किसी विशेष के काम करता है लोडर। यह मार्गदर्शिका लोडर सेट करती है, एक प्रविष्टि जो संपादक को प्रारंभ करती है, और उत्पादन सीएसएस निष्कर्षण।

1. स्थापित करें

npm install grapesjs
npm install -D webpack webpack-cli css-loader style-loader

2. webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' },
  module: {
    rules: [
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
    ],
  },
};

3. संपादक को इनिशियलाइज़ करें

// src/index.js
import grapesjs from 'grapesjs';
import 'grapesjs/dist/css/grapes.min.css';

grapesjs.init({
  container: '#gjs',
  height: '100vh',
  fromElement: true,
  storageManager: false,
});

सीएसएस आयात ऊपर दिए गए नियम द्वारा नियंत्रित किया जाता है .css ।

4. उत्पादन में सीएसएस निकालें

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  // ...entry/output
  module: {
    rules: [
      { test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'] },
    ],
  },
  plugins: [new MiniCssExtractPlugin()],
};

यह शैलियों को इंजेक्ट करने के बजाय एक कैश करने योग्य .css फ़ाइल का उत्सर्जन करता है रनटाइम - पहले पेंट के लिए बेहतर।

उत्पादन युक्तियाँ

कैशिंग और वजन के लिए उत्पादन निर्माण को ट्यून करें। इसके बजाय संपादक सीएसएस एक कैश करने योग्य फ़ाइल के रूप में जहाजों का उपयोग करेंMiniCssExtractPlugin, और सामग्री-हैश फ़ाइल नाम ()[contenthash] जोड़ें ताकि ब्राउज़र आक्रामक रूप से कैश करें लेकिन नए बिल्ड उठाएं। GrapesJS बड़ा है - यदि आपके ऐप का केवल एक हिस्सा इसका उपयोग करता है, तो इसे एक गतिशील import('grapesjs') के माध्यम से लोड करें ताकि वेबपैक इसे अपने स्वयं के हिस्से में विभाजित कर दे और बाकी ऐप हल्का रहे। उत्पादन में स्रोत मानचित्रों को बंद (या बाहरीsource-map) करें, और लघुकरण और पेड़-झटकों को संभालने देंmode: 'production'।style-loader

आवश्यक शर्तें

आपको 18+ और वेबपैक 5 Node.js आवश्यकता होगी। वेबपैक को केवल एक चीज पता होनी चाहिए कि कैसे करें GrapesJS स्टाइलशीट आयात को संभालें; JavaScript बिना किसी विशेष लोडर के काम करता है। प्रविष्टि/आउटपुट, नियमों और प्लगइन्स से परिचित होना पर्याप्त है।

संपादक में कस्टम ब्लॉक जोड़ें

इसके बाद grapesjs.initब्लॉक मैनेजर के साथ ड्रैग करने योग्य ब्लॉक पंजीकृत करें:

editor.BlockManager.add('hero', {
  label: 'Hero section',
  category: 'Sections',
  content: '<section class="hero"><h1>Headline</h1><p>Copy</p></section>',
});

एक समृद्ध सेट के लिए तैयार ब्लॉक पुस्तकालयों और प्रीसेट को GJS.Market से खींचें।

कोड-स्प्लिट GrapesJS अपने स्वयं के हिस्से में

GrapesJS बड़ा है। यदि आपके ऐप का केवल एक हिस्सा इसका उपयोग करता है, तो इसे डायनेमिक के माध्यम से लोड करें आयात करें ताकि वेबपैक इसे विभाजित कर दे और बाकी ऐप हल्का रहे:

async function openEditor(container) {
  const { default: grapesjs } = await import('grapesjs');
  await import('grapesjs/dist/css/grapes.min.css');
  return grapesjs.init({ container, height: '100vh' });
}

प्रदर्शन युक्तियाँ

कैश करने योग्य CSS फ़ाइल को उत्सर्जित करने के लिए उत्पादन में उपयोग करें MiniCssExtractPlugin रनटाइम पर शैलियों को इंजेक्ट करने के बजाय, और फ़ाइल नाम जोड़ें [contenthash] इसलिए ब्राउज़र आक्रामक रूप से कैश करते हैं लेकिन नए बिल्ड उठाते हैं। स्रोत मानचित्र को बंद करें (या एक बाहरी नक्शा) उत्पादन में, और संभालने दें mode: 'production' लघुकरण और पेड़ हिलाना।

सामान्य त्रुटियों का समस्या निवारण

सीएसएस आयात साधनों पर "आपको एक उपयुक्त लोडर की आवश्यकता हो सकती है" css-loader(style-loaderया MiniCssExtractPlugin) नहीं है के लिए .cssकॉन्फ़िगर किया गया है। एक अनस्टाइल कैनवास का अर्थ है स्टाइलशीट आयात हल नहीं हुआ। एक विशाल बंडल का मतलब है कि GrapesJS नहीं है कोड-स्प्लिट - इसे डायनेमिक इंपोर्ट के साथ लोड करें।

GrapesJS के लिए वेबपैक बनाम वाइट

दोनों बंडल GrapesJS सफाई से हैं। वेबपैक सही घर है जब आपका प्रोजेक्ट पहले से ही है इस पर मानकीकरण करता है और आप लोडर और चंक्स पर स्पष्ट नियंत्रण चाहते हैं; Vite है low-config और dev. GrapesJS-विशिष्ट सेटअप समान रूप से छोटा है या तो।

अगले चरण

शून्य-कॉन्फ़िगरेशन बंडलर पसंद करते हैं? GrapesJS + Vite देखें सेटअप। GrapesJS + Reactभी देखें, ब्राउज़ करें GrapesJS मार्केटप्लेस, या से शुरू करें GJS.Market होम पेज।

अक्सर पूछे जाने वाले प्रश्न

GrapesJS किन लोडर की आवश्यकता है?

style-loader और ( css-loader या MiniCssExtractPlugin उत्पादन में) तो संपादक सीएसएस आयात हल करता है। जेएस को किसी विशेष लोडर की आवश्यकता नहीं है।

मैं स्टाइलशीट कैसे आयात करूं?

अपनी प्रविष्टि में आयात करें 'grapesjs/dist/css/grapes.min.css' ; सीएसएस नियम इसे लोडर के माध्यम से रूट करता है।

क्या मुझे उत्पादन में सीएसएस निकालना चाहिए?

हाँ - कैश करने योग्य उत्सर्जित करने के लिए उपयोग करें MiniCssExtractPlugin .css शैलियों को इंजेक्ट करने के बजाय फ़ाइल करें।