2015-05-24 13 views
8

मैं वेबपैक का उपयोग कर रहा था, और हाल ही में कुछ संकुल अपडेट किए गए (बेबेल, बेबेल-लोडर, ..) और वेबपैक आउटपुट में एक त्रुटि देखें। लेकिन, सुनिश्चित नहीं है कि आगे डीबग कैसे करें। आवेदन ठीक काम करता प्रतीत होता है। मैंने विभिन्न डीबग विकल्पों के साथ प्रयास किया, लेकिन त्रुटि का वर्बोज आउटपुट नहीं मिला।वेबपैक वर्बोज़ त्रुटि संदेश

./node_modules/.bin/webpack --config webpack.config.js --progress --profile --colors --display-error-details --display-reasons --debug 
NODE_ENV == production : false 
6809ms build modules  
14ms seal 
55ms optimize 
30ms hashing 
59ms create chunk assets 
27ms additional chunk assets 
1551ms optimize chunk assets 
33ms optimize assets 
83ms emit 
Hash: 5be1a8485c4110c2f837 
Version: webpack 1.9.8 
Time: 8674ms 
     Asset  Size Chunks    Chunk Names 
mww7few.ttf 78.4 kB   [emitted] 
elilql0.png 7.47 kB   [emitted] 
    client.js 3.98 MB  0 [emitted] main 
index.html 130 bytes   [emitted] 
    [0] multi main 52 bytes {0} [built] 
     factory:0ms building:3ms = 3ms 
    + 387 hidden modules 

ERROR in undefined 

मुझे यकीन नहीं है कि ERROR in undefined क्या है। मुझे लोडर के साथ कोई समस्या संदेह है, क्योंकि मैंने babel-loader अपडेट किया है लेकिन यह सुनिश्चित नहीं है कि और जानें।

उत्तर

1

@bsr

मुझे हाल ही में यही समस्या थी। यह पता चला है कि यह HtmlWebpackPlugin से था। मैं एक शीर्षक

new HtmlWebpackPlugin({ 
    .... 
    title: 'Title' 
}), 

पारित करने के लिए भूल गया और मेरे टेम्पलेट पर मैं इस <title>{%=o.htmlWebpackPlugin.options.title

था तो तुम HtmlWebpackPlugin उपयोग करते हैं, सुनिश्चित करें कि आप सभी मापदंडों वहाँ से पारित कर सकते हैं।

+0

संकेत के लिए धन्यवाद। हालांकि यह मेरे लिए एचटीएमएल वेबपैक प्लगइन नहीं है। लेकिन उसने मुझे एक संकेत दिया। मैं अपने प्लगइन की कॉन्फ़िगरेशन के लिए पुनः जांच करूंगा।+1 – bsr

+0

रिक्त फ़ंक्शन बनाने का प्रयास करें, 'फ़ंक्शन हैलो() {}' फिर एंट्री पॉइंट के रूप में उपयोग करें, देखें कि क्या आपके वेबपैक कॉन्फ़िगरेशन में कुछ गड़बड़ है या नहीं। अगर त्रुटि गायब हो जाती है तो आपके कोड के बारे में कुछ, अन्यथा आप प्रत्येक प्लगइन को हटा सकते हैं। – chriz

+0

धन्यवाद। आपका अंतर्ज्ञान सही था। https://github.com/ampedandwired/html-webpack-plugin/issues/50। साथ ही, आपकी डीबगिंग विधि मुझे कारण की पहचान करने में मदद करती है। अनेक अनेक धन्यवाद। – bsr

2

यह webpack एचटीएम्एल प्लगइन संस्करण 1.4 में एक बग है और 1.5

में तय किया गया था त्रुटि के लिए कारण यह है कि o.htmlWebpackPlugin.assets पदावनत किया गया है।
आप o.htmlWebpackPlugin.files बजाय का उपयोग सीएसएस और प्रकट फ़ाइलों का उपयोग करने में सक्षम होना चाहिए:

<!DOCTYPE html> 
<html{% if(o.htmlWebpackPlugin.files.manifest) { %} manifest="{%= o.htmlWebpackPlugin.files.manifest %}"{% } %}> 
    <head> 
    <meta charset="UTF-8"> 
    <title>{%=o.htmlWebpackPlugin.options.title || 'Webpack App'%}</title> 
    {% if (o.htmlWebpackPlugin.files.favicon) { %} 
    <link rel="shortcut icon" href="{%=o.htmlWebpackPlugin.files.favicon%}"> 
    {% } %} 
    {% for (var css in o.htmlWebpackPlugin.files.css) { %} 
    <link href="{%=o.htmlWebpackPlugin.files.css[css] %}" rel="stylesheet"> 
    {% } %} 
    </head> 
    <body> 
    {% for (var chunk in o.htmlWebpackPlugin.files.chunks) { %} 
    <script src="{%=o.htmlWebpackPlugin.files.chunks[chunk].entry %}"></script> 
    {% } %} 
    </body> 
</html> 

लेकिन वहाँ भी एक सरल तरीका है।
वेबपैक-एचटीएमएल-प्लगइन 1.3+ में एक सुविधा है जो आपके टेम्पलेट में सभी संपत्तियों (सीएसएस, फेविकॉन, जावास्क्रिप्ट और मैनिफेस्ट फाइल) इंजेक्ट करेगी। तो आपके विन्यास इस प्रकार दिखाई देंगे:

new HtmlWebpackPlugin({ 
    inject: true, 
    template: 'template.html', 
    title: 'Custom template', 
}) 

और टेम्पलेट:

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="UTF-8"> 
    <title>{%=o.htmlWebpackPlugin.options.title || 'Webpack App'%}</title> 
    </head> 
    <body> 
    </body> 
</html> 
1

मामले में किसी को इस सवाल का हो जाता है और यह htmlWebpackPlugin के साथ कोई समस्या नहीं है, IMO वास्तविक मुद्दा Webpack में है खुद ही सही त्रुटि प्रदान नहीं करता है।

जाहिर है इस पीआर हल करने के लिए यह

https://github.com/webpack/webpack/pull/1146

हम प्लगइन्स उपयोग हम कि त्रुटियों को तार थे thowing थे प्रयास करता है। हालांकि त्रुटियों में दोहराए गए त्रुटियां

त्रुटि को अपरिभाषित किया गया जो कि कोई मदद नहीं था। अब हमें वास्तव में त्रुटि रिपोर्टिंग की आवश्यकता है जो हमें चाहिए।

आँकड़े अब त्रुटि रिपोर्टिंग कैच स्ट्रिंग त्रुटियों में त्रुटि। त्रुटि रिपोर्टिंग के नियमों का पालन न करने के लिए कुछ प्लगइन्स दिखाई देते हैं। हालांकि यह उपयोगकर्ताओं के लिए एक दुःस्वप्न डीबगिंग करता है। इसलिए स्ट्रिंग की अनुमति दी जानी चाहिए।

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