đặt hàng nhiều điểm vào trong Webpack

Question

Tôi có nhiều mục trong cấu hình Webpack tôi:

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

Khi tôi chạy npm start (webpack-dev-server --inline --progress --port 8080 --bail) các \<my-app>Loading...</my-app> trong index.html của tôi biến thành kịch bản theo thứ tự này:

<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> 

Nhưng khi tôi chạy webpack -p --progress --profile --bail, theo thứ tự này:

phổ biến, ứng dụng, polyfil, sau đó nhà cung cấp

Thứ tự là quan trọng. Mã app.js của tôi sẽ không hoạt động nếu chạy trước polyfil.js hoặc vendor.js. Làm cách nào để kiểm soát thứ tự?

Answer 1

Cảm ơn @EdmarMiyake đã chỉ cho tôi theo hướng chunksSortMode. Tôi đã thử đặt nó thành 'phụ thuộc' trước, nhưng điều đó dường như không hoạt động. Cuối cùng tôi đành thế này:

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; 
    } 
}; 

và

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

Answer 2

Bạn có thể tạo một helper để hoàn thành nó:

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; 
     } 
    } 
    } 

Và trong webpack tập tin cấu hình của bạn:

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

Answer 3

Chức năng này có thể còn tốt hơn: bạn đưa ra danh sách các yếu tố bạn muốn đặt ở đầu tiên trong tập tin html của bạn

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; 
    } 
};