html-webpack-plugin

這個插件很重要，做用一是建立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是指按照依賴關係排序。