आदेश Webpack

Question

में एक से अधिक प्रवेश बिंदुओं

मैं अपने Webpack config में कई प्रविष्टियाँ है:

entry: { 
'polyfills': './src/polyfills.ts', 
'vendor': './src/vendor.ts', 
'app': './src/main.ts' 
}, 

जब मैं चलाने npm start (webpack-dev-server --inline --progress --port 8080 --bail) मेरी index.html में \<my-app>Loading...</my-app> इस क्रम में स्क्रिप्ट में बदल जाता है:

<script type="text/javascript" src="http://localhost:8080/common.js"> <!--I also have CommonsChunkPlugin--> 
</script><script type="text/javascript" src="http://localhost:8080/vendor.js"></script> 
<script type="text/javascript" src="http://localhost:8080/polyfills.js"></script> 
<script type="text/javascript" src="http://localhost:8080/app.js"></script> 

लेकिन जब मैं webpack -p --progress --profile --bail चलाने यह इस क्रम में बताया गया है:

आम, एप्लिकेशन, polyfil, तो विक्रेता

आदेश महत्वपूर्ण है। Polyfil.js या vendor.js से पहले चलाए जाने पर मेरा app.js कोड काम नहीं करेगा। मैं ऑर्डर को कैसे नियंत्रित करूं?

Answer 1

धन्यवाद @EdmarMiyake। मैंने इसे पहले 'निर्भरता' पर सेट करने की कोशिश की, लेकिन ऐसा लगता है कि यह काम नहीं कर रहा था। अंत में मैं इस का सहारा लिया:

function packageSort(packages) { 
    return function sort(left, right) { 
     var leftIndex = packages.indexOf(left.names[0]); 
     var rightindex = packages.indexOf(right.names[0]); 

     if (leftIndex < 0 || rightindex < 0) { 
      throw "unknown package"; 
     } 

     if (leftIndex > rightindex){ 
      return 1; 
     } 

     return -1; 
    } 
}; 

और

new HtmlWebpackPlugin({ 
    template: 'src/index.html', 
    chunksSortMode: packageSort(['common', 'polyfills', 'vendor', 'app']) 
}), 

Answer 2

आप क्रम में एक सहायक बना सकते हैं इसे पूरा करने के:

function packageSort(packages) { 
    // packages = ['polyfills', 'vendor', 'app'] 
    var len = packages.length - 1; 
    var first = packages[0]; 
    var last = packages[len]; 
    return function sort(a, b) { 
     // polyfills always first 
     if (a.names[0] === first) { 
     return -1; 
     } 
     // app always last 
     if (a.names[0] === last) { 
     return 1; 
     } 
     // vendor before app 
     if (a.names[0] !== first && b.names[0] === last) { 
     return -1; 
     } else { 
     return 1; 
     } 
    } 
    } 

और अपने webpack कॉन्फ़िग फ़ाइल में: मुझे chunksSortMode की दिशा में इशारा करते हुए के लिए

plugins.index = new HtmlWebpackPlugin({ 
    template:  'src/index.html', 
    filename:  'index.html', 
    chunksSortMode: packageSort(['polyfills', 'vendor', 'app']) 
}); 

Answer 3

इस समारोह और भी बेहतर हो सकता है: आप तत्व आप अपने html फ़ाइल में पहली बार में रखना चाहते हैं की सूची दे

function packageSort(packages) { 
    return function sort(left, right) { 
     var leftIndex = packages.indexOf(left.names[0]); 
     var rightindex = packages.indexOf(right.names[0]); 
     if (rightindex < 0) { 
      return -1; 
     } 

     if (leftIndex < 0) { 
      return 1; 
     } 

     if (leftIndex > rightindex){ 
      return 1; 
     } 

     return -1; 
    } 
};