एकाधिक एचटीएमएल webpack

का उपयोग करके फ़ाइलें मैं एक परियोजना है कि मुझे यकीन है कि अगर यह संभव है, मैं एक गलत तरीके से या कुछ गलतफहमी में हूँ नहीं कर रहा हूँ में कुछ करने के लिए कोशिश कर रहा हूँ। हम वेबपैक का उपयोग कर रहे हैं, और विचार एक से अधिक HTML फ़ाइल की सेवा करना है।एकाधिक एचटीएमएल webpack

स्थानीय होस्ट: 8181 -> कार्य करता index.html
स्थानीय होस्ट: 8181/example.html -> example.html

मैं, कई प्रवेश बिंदुओं की स्थापना निम्नलिखित documentation से यह करने के लिए कोशिश कर रहा हूँ में कार्य करता है:

फ़ोल्डर संरचना है:

/ 
|- package.json 
|- webpack.config.js 
    /src 
    |- index.html 
    |- example.html 
    | /js 
     |- main.js 
     |- example.js

Webpack.config.js:

... 
entry: { 
    main: './js/main.js', 
    exampleEntry: './js/example.js' 
}, 
output: { 
    path: path.resolve(__dirname, 'build', 'target'), 
    publicPath: '/', 
    filename: '[name].bundle.js', 
    chunkFilename: '[id].bundle_[chunkhash].js', 
    sourceMapFilename: '[file].map' 
}, 
...

index.html

<!DOCTYPE html> 
<html 
<head> 
    ... 
    <link type="text/css" href="/style/default.css"> 
</head> 
<body> 
    <div id="container"></div> 
    <script src="/main.bundle.js"></script> 
</body> 
</html>

example.html:

<!DOCTYPE html> 
<html 
<head> 
    ... 
    <link type="text/css" href="/style/default.css"> 
</head> 
<body> 
    ... 
    <script src="/example.bundle.js"></script> 
</body> 
</html>

किसी जानता है कि मैं गलत क्या कर रही हूं?

धन्यवाद।

स्रोत

2016-09-30 miguelitomp

क्या आप इसके लिए समाधान ढूंढ सकते हैं? मैं भी वही उपयोग केस ढूंढ रहा हूं। – monica

एक पेड़ जावास्क्रिप्ट मॉड्यूल, चित्र, टेम्पलेट्स और इतने पर जैसे कई अन्य परिसंपत्तियों का संदर्भ देता है की जड़ के रूप में एक entrypoint देखें। जब आप एक से अधिक प्रविष्टि बिंदु को परिभाषित करते हैं, तो आप मूल रूप से अपनी संपत्तियों को तथाकथित हिस्सों में विभाजित करते हैं ताकि आपके सभी कोड और संपत्तियां एक एकल बंडल में न हों।

मैं क्या लगता है कि आप हासिल करना चाहते हैं भिन्न ऐप्स हैं भी अपनी संपत्ति के विभिन्न मात्रा है जो आप पहले से ही अपने entrypoints के साथ परिभाषित करने का उल्लेख के लिए एक से अधिक "index.html" है।

एक index.html फ़ाइल प्रतिलिपि बनाई जा रही या यहां तक कि इन entrypoints entrypoint तंत्र द्वारा नियंत्रित नहीं कर रहा है के संदर्भ के साथ एक पैदा - यह इसके विपरीत है। से निपटने HTML पृष्ठों के लिए एक बुनियादी दृष्टिकोण html-webpack-plugin जो न केवल html फ़ाइलें कॉपी कर सकते हैं उपयोग कर रहा है, लेकिन यह भी templating के लिए एक व्यापक तंत्र है। यह विशेष रूप से सहायक होता है यदि आप अपने बंडल को बंडल हैश से चिपकाना चाहते हैं जो आपके ऐप को अपडेट करते समय ब्राउज़र कैशिंग समस्याओं से बचने के लिए सुंदर है।

आप एक नाम पैटर्न [id].bundle_[chunkhash].js के रूप में आप नहीं रह main.bundle.js के रूप में अपने जावास्क्रिप्ट बंडल संदर्भित कर सकते हैं के रूप में यह main.bundle_73efb6da.js तरह पाई जा सकती है के रूप में परिभाषित किया है।

html-webpack-plugin पर एक नज़र डालें। विशेष रूप से आपके उपयोग के मामले के लिए प्रासंगिक:

plugins: [ 
    new HtmlWebpackPlugin({ 
    filename: 'index.html', 
    template: 'src/index.html', 
    chunks: ['main'] 
    }), 
    new HtmlWebpackPlugin({ 
    filename: 'example.html', 
    template: 'src/example.html', 
    chunks: ['exampleEntry'] 
    }) 
]

कृपया ध्यान रखें:

आप शायद अंत में ऐसा ही कुछ (परीक्षण नहीं चेतावनी) होनी चाहिए भाग सरणी में एंट्रीपॉइंट के नाम का संदर्भ देने के लिए, इसलिए आपके उदाहरण में यह exampleEntry होना चाहिए। शायद यह भी एक अच्छा विचार है कि अपने टेम्पलेट्स को रूट फ़ोल्डर फ़ोल्डर में सीधे रखने के बजाय किसी विशिष्ट फ़ोल्डर में स्थानांतरित करें।

उम्मीद है कि इससे मदद मिलती है।

स्रोत

2016-10-02 11:35:37

एकाधिक एचटीएमएल webpack

उत्तर

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