वेबपैक

Question

पर "module.exports = 'html_template_content'" के साथ मुझे क्या करना चाहिए, इसलिए मैं वेबपैक का उपयोग करके एक बहुत ही सरल कार्य करना चाहता हूं।

मेरे पास कुछ स्थिर HTML टेम्पलेट्स हैं जैसे उदा।

test.html

<div><span>template content</span></div> 

और सभी मैं करना चाहता हूँ टेम्पलेट के अंदर स्ट्रिंग लौटाने जैसे

require("raw!./test.html") 

साथ इस तरह की स्ट्रिंग लौट जाना है:

"<div><span>template content</span></div>" 

लेकिन इसके बजाय, यह निम्न स्ट्रिंग

देता है

"modules.exports = <div><span>template content</span></div>" 

मैंने कच्चे लोडर और एचटीएमएल लोडर की तरह कई मॉड्यूल की कोशिश की है। और वे दोनों एक ही तरीके से व्यवहार करते हैं। इसलिए मैंने स्रोत कोड पर एक नज़र डाली, बस यह पता लगाने के लिए कि इस तरह से व्यवहार करने के लिए इसका समर्थन किया गया है।

तो क्या वास्तव में मैं इस के साथ क्या करना है, अगर मैं सिर्फ कच्चे एचटीएमएल चाहते उम्मीद कर रहा हूँ? क्या यह प्रीपेड "module.exports =" स्ट्रिंग को हटाने के लिए बस एक बुरा अभ्यास है? से बंडल संपादित करें: जब आप require('./test.html') बारे में यह मतलब है कि आप बस कोड को चलाने/

मेरी config

module.exports = 
{ 
    module: 
    { 
     loaders: 
      [ 
       { test: /\.html$/, loader: "raw-loader" } 
      ] 
    } 
}; 

Answer 1

मैं eval

console.log(eval(require("raw!./test.html"))); 

यह वास्तव में एचटीएमएल टेम्पलेट देता है, का उपयोग कर एक गंदा वैकल्पिक हल मिल गया है, लेकिन मैं जब तक हम एक बेहतर एक मिल गया है इस समाधान को खुला छोड़ देते बहस के लिए होगा। के रूप में यह पहले से ही webpack config

const test = require('./test.html') 

स्पष्टीकरण में निर्दिष्ट किया जाता

Answer 2

: कुछ भी नहीं लौटने बंडल में 'modules.export =' भाग परिणाम निकालने से लोडर श्रृंखला द्वारा लौटाया गया। परिणाम इस कोड में module.exports के रूप में निर्यात किया जाता है। इस परिणाम आपके द्वारा सौंपे जाने की जरूरत का उपयोग करने के अपने चर के बयान की आवश्यकता होती है:

var htmlString = require('raw!./test.html'); 
//htmlString === "<div><span>template content</span></div>" 

याद रखें कि Webpack में किसी भी लोडर रिटर्न जे एस कोड - एचटीएमएल नहीं, नहीं सीएसएस। आप का उपयोग कर सकते हैं एचटीएमएल, सीएसएस और जो कुछ भी प्राप्त करने के लिए यह कोड।

Answer 3

समाधान, किसी भी अतिरिक्त लोडर निर्दिष्ट किए बिना अपनी फ़ाइल की आवश्यकता होती है: अपने वर्तमान कोड के साथ, आप अपनी फ़ाइल को दो बार raw लोडर आवेदन कर रहे हैं । जब आप अपनी कॉन्फ़िगरेशन में लोडर श्रृंखला निर्दिष्ट करते हैं:

loaders: 
    [ 
     { test: /\.html$/, loader: "raw-loader" } 
    ] 

...आप पहले से ही लोडर श्रृंखला के लिए हर समय यह लोडर को जोड़ने के लिए आप test हालत (यहाँ, हर html फ़ाइल)

इसलिए मिलान एक फ़ाइल की आवश्यकता होती है, जब आप इस

const test = require('raw!./test.html') 

लिखने webpack कह रहे हैं ... यह वास्तव में इस

const test = require('raw!raw!./test.html')