How to use chunksSortMode in HtmlWebpackPlugin / webpack 2

I have an issue with the order of my chunks inserted in index.html.

I'm using webpack2 and HtmlWebpackPlugin.

I think what is controlling the order of the chunk is the chunksSortMode option.

The documentation for HtmlWebpackPlugin is saying:

chunksSortMode: Allows to control how chunks should be sorted before they are included to the html. Allowed values: 'none' | 'auto' | 'dependency' |'manual' | {function} - default: 'auto'

What is the difference between:

none
auto
dependency
manual

For the 'function' option, this answer gave me insight

It's likely that I don't understand something basic as I would expect to find this info in the documentation from the start.

Solution

I think this file may help you, it's well commented. chunksorter

short summary:

none: performs identity mapping (no-sort).

auto: sort by chunk Id

dependency: sorts dependencies between chunks by their "parents" attribute.

manual: sort manually by the chunks:

@param {Array} chunks the chunks to sort
@return {Array} The sorted chunks