2016-03-25 5 views
11

उदाहरण के लिए, मैं एक मुख्य प्रवेश html फ़ाइल है:एचटीएमएल टुकड़ों को जोड़ने के लिए वेबपैक का उपयोग कैसे करें?

<div> 
    <!-- I'd like to include a html partial here --> 
</div> 

और मैं एक आंशिक एचटीएमएल है

<span>I'm a partial html piece</span> 

मुझे आशा है कि मैं नीचे की तरह एक अंतिम एचटीएमएल उत्पन्न करने के लिए webpack उपयोग कर सकते हैं:

<div> 
    <span>I'm a partial html piece</span> 
</div> 

क्या यह वेबपैक प्लगइन/लोडर के साथ ऐसा करना संभव है?

उत्तर

5

वहाँ इस लक्ष्य को हासिल करने के लिए लोडर की एक जोड़ी है: https://webpack.github.io/docs/list-of-loaders.html#templating


उदाहरण के लिए:

html-loader

<div>${require('./partials/gallery.html')}</div> 

ejs-html-loader

<% include some/file %> 
+1

मुझे एक ही समस्या है और जब मैं

${require('./partials/gallery.html')}
का उपयोग करता हूं तो –

+1

की आवश्यकता नहीं है, मैं इसे काम नहीं कर सकता, क्या आप एक कामकाजी उदाहरण दे सकते हैं? – Ruby

+0

उपरोक्त में से कोई भी काम –

0

आप इस प्लगइन github.com/bazilio91/ejs-compiled-loader उपयोग कर सकते हैं:

{ test: /\.ejs$/, use: 'ejs-compiled-loader' } 

.ejs में अपने .html फ़ाइलों को बदलें और अपने HtmlWebpackPlugin सही .ejs टेम्पलेट को इंगित करने के लिए:

new HtmlWebpackPlugin({ 
    template: 'src/views/index.ejs', 
    filename: 'index.html', 
    title: 'Home', 
    chunks: ['index'] 
}) 

आप में आंशिक, चर, और संपत्ति आयात कर सकते हैं .ejs फाइलें:

src/views/partials/head.ejs:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"/> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/> 
    <meta name="viewport" content="width=device-width, initial-scale=1"/> 
    <title><%= htmlWebpackPlugin.options.title %></title> 
</head> 

src/js/ejs_variables.js:

const hello = 'Hello!'; 
const bye = 'Bye!'; 

export {hello, bye} 

src/views/index.ejs:

<% include src/views/partials/head.ejs %> 
<body>  
    <h2><%= require("../js/ejs_variables.js").hello %></h2> 

    <img src=<%= require("../../assets/sample_image.jpg") %> /> 

    <h2><%= require("../js/ejs_variables.js").bye %></h2> 
</body> 

एक नोट, जब आप एक आंशिक शामिल पथ अपनी परियोजना के रूट के सापेक्ष होना चाहिए।

मैंने उसी प्रश्न का उत्तर दिया stackoverflow.com/a/48750048/7448956

+1

हालांकि यह लिंक प्रश्न का उत्तर दे सकता है, लेकिन यहां उत्तर के आवश्यक हिस्सों को शामिल करना बेहतर है और संदर्भ के लिए लिंक प्रदान करना बेहतर है। लिंक किए गए पृष्ठ में परिवर्तन होने पर लिंक-केवल उत्तर अमान्य हो सकते हैं। - [समीक्षा से] (/ समीक्षा/कम गुणवत्ता वाली पोस्ट/1879 9 68 9) –

+0

@ जेन्सबोटिस धन्यवाद, मैंने जवाब संपादित किया है। – aaawww

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

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