webpack打包之后js文件引用顺序错乱，vendor顺序变成了最后，自己查了很多方法，都不能解决问题，于是自己一个一个排查，终于找到了问题所在

问题描述：

1.html模板文件中js的顺序

1
2
<script src="/dist/js/vendor.js"></script>
<script src="/dist/js/main.js"></script>

2.打包后的文件中js顺序

1
2
<script type=text/javascript src=../js/main-bf4e4.js></script>
<script type=text/javascript src=../js/vendor-87cf4.js></script>

问题产生原因：

1
2
3
4
5
6
7
8
9
new HtmlWebpackPlugin({
   /* 省略 */
  chunks: [k, 'vendor'],
  /* 省略 */
  chunksSortMode: function (chunk1, chunk2) {

    return chunk1.names[0].indexOf('vendor') > -1 ? 0 : 1;
  }
})

解决办法：

通过 HtmlWebpackPlugin 的 chunksSortMode 进行排序，两个方法其实是一个意思，就是把vendor放在前

chunksSortMode的类似数组的sort方法，返回小于0，则参数一排在参数二前面， 返回大于0 相反

1.方法一

1
2
3
4
5
6
7
8
9
10
11
new HtmlWebpackPlugin({
     /* 省略 */
    chunks: [k, 'vendor'],
    /* 省略 */
    chunksSortMode: function (chunk1, chunk2) {
      var order = [k, 'vendor']
      var order1 = order.indexOf(chunk1.names[0]);
      var order2 = order.indexOf(chunk2.names[0]);
      return order2 - order1;
    }
  })

2.方法二

1
2
3
4
5
6
7
8
new HtmlWebpackPlugin({
     /* 省略 */
    chunks: [k, 'vendor'],
    /* 省略 */
    chunksSortMode: function (chunk1, chunk2) {
      return chunk1.names[0].indexOf('vendor') > -1 ? -1 : 1;
    }
  })