html-webpack-plugin excludeChunks和chunksSortMode

https://github.com/jantimon/html-webpack-plugin#configuration

這個插件很重要，作用一是創建HTML頁面文件到你的輸出目錄，作用二是將webpack打包后的chunk自動引入到這個HTML中

首先安裝和引入：

const HtmlPlugin = require('html-webpack-plugin')
如果是單頁面應用，用法很簡單了：

new HtmlPlugin({
    filename: 'index.html',
    template: 'pages/index.html'
}
template 是模板文件的地址，filename 是根據模板文件生成的html的文件名

如果是多個html頁面的話，就需要多次實例化HtmlPlugin。比如現在有index.html和login.html兩個頁面：

{
    entry: {
        index: './src/index.js',
        login: './src/login.js'
    },
    plugins: [
        new HtmlPlugin({
            filename: 'index.html',
            template: 'pages/index.html',
            excludeChunks: ['login'],
            chunksSortMode: 'dependency'
        },
        new HtmlPlugin({
            filename: 'login.html',
            template: 'pages/login.html',
            excludeChunks: ['index'],
            chunksSortMode: 'dependency'
        }
    ]
}
需要着重關注兩個參數：excludeChunks和chunksSortMode

前面說了，該插件的作用二是將webpack打包后的chunk自動引入到生成的html中。上面的配置有兩個入口文件，所以打包后會有index和login兩個chunk，而在生成的兩個html頁面中都會引入這兩個chunk。事實上一個html文件中只需要引入相應的chunk就夠了，比如index.html只需要引入index的chunk。

excludeChunks就是解決上面問題的。其作用是指定生成的頁面中不引入某個chunk，當然了還有一個chunks參數表示指定引入某個chunk。

多頁面中一般會提取公共部分的chunk，這個時候一個html頁面會引入多個chunk，而這些chunk之間是有依賴關系的。即必須按照順序用script標簽引入。chunksSortMode是用來指定這種順序的排序規則。dependency是指按照依賴關系排序。