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是指按照依赖关系排序。