2016-01-23 4 views
9

मुझे अपनी प्रोजेक्ट में लाइब्रेरी आयात करने की आवश्यकता है, लाइब्रेरी एक जावास्क्रिप्ट फ़ाइल होनी चाहिए, जिसे HTML पर रेखांकित करने की आवश्यकता है।जावास्क्रिप्ट वेबपैक के साथ इनलाइन हो सकता है?

उदाहरण के लिए

:

पुस्तकालय कोड:

(function(){ 
    var a = 0; 
})(); 

मैं html में इस कोड को इनलाइन बनाने की जरूरत है।

एचटीएमएल:

<html> 
    <head> 
    <script> 
     (function(){ 
     var a = 0; 
     })(); 
    </script> 
    </head> 

    <body> 
    </body> 
</html> 

मैं webpack के साथ इस लागू कर सकते हैं? मुझे script-loader मिल गया है, लेकिन यह स्क्रिप्ट चलाता है, इसे इनलाइन नहीं बनाता है।

+0

मैं spe पूछ सकता हूँ वेबपैक द्वारा बनाए गए जेएस बंडल के बजाय आप इसे HTML फ़ाइल में क्यों जोड़ना चाहते हैं। – sandeep

+0

@ संदीप यह एक उत्तरदायी पृष्ठ समाधान है जो मोबाइल डिवाइस के आकार के अनुसार एचटीएमएल निर्देश का फ़ॉन्ट आकार सेट करता है। पेज को प्रस्तुत करने से पहले इसे निष्पादित करने की आवश्यकता है। – Leon

+0

यह सीएसएस 'मीडिया 'के साथ किया जाना चाहिए, जेएस के साथ नहीं। लेकिन अगर जेएस है तो आप '' से पहले भागना चाहते हैं, तो '

6

मैं इस का समर्थन करने के लिए एक html webpackplugin पर काम शुरू कर दिया है चलाना चाहते हैं। आप उन फ़ाइलों से मेल खाने के लिए रेगेक्स निर्दिष्ट करते हैं जिन्हें आप इनलाइन एम्बेड करना चाहते हैं।

plugins: [ 
    new HtmlWebpackPlugin({ 
     inlineSource: '.(js|css)$' // embed all javascript and css inline 
    }), 
    new HtmlWebpackInlineSourcePlugin() 
] 
+0

बढ़िया! यह अब काम कर सकता है? – Leon

4

मैं, घूंट के बिना यह था inline-source की मदद से:

  1. स्थापित इनलाइन स्रोत-CLI: npm install inline-source-cli
  2. अपने html फ़ाइल में स्क्रिप्ट टैग के लिए एक inline विशेषता जोड़ें: <script inline src="path/to/index.js"></script>
  3. भागो inline-source --root ./dist dist/path/to/index-pre.html > dist/path/to/index.html
+0

हालांकि थोड़ा वेब क्लीनर चिपकने के लिए थोड़ा क्लीनर – coiso

संबंधित मुद्दे