【webpack】插件 html-webpack-plugin使用总结

之前做的项目一直是单页面的，搭建项目之后自动配置的，所以没太深入了解这个插件，后来由于项目不断变大，导致项目有些卡顿，所以考虑用多页面实现，这样每个一级导航就新打开一个页面，每个页面的内存占用低了，但总内存占用比较高，多页面单页面分析（占坑），最后还是用的多页面；下面就说一下多页面中html-webpack-plugin插件的使用。
1、引入：

const HtmlWebpackPlugin = require('html-webpack-plugin')

2、使用，顾名思义，有html就是和html相关的，单页面时只初始化一次插件就可以，默认的会引入所有的js：

new HtmlWebpackPlugin({
      template: 'src/index.html'
}),

当做成多页面应用程序的时候，就要初始化多次，例如2个页面就初始化2次：

let chunksort = ['manifest','vendor','vueMixin','index']

plugins:[
new HtmlWebpackPlugin({
    filename: resolve(__dirname,'./dist/index.html'),
    template: './src/1indexModel/index.html',
    inject:'body',
    chunks: ['manifest','vendor','vueMixin','index'],
}),
new HtmlWebpackPlugin({
    filename: resolve(__dirname,'./dist/product.html'),
    template: 'src/2productModel/product.html',
    inject:'body',
    chunks: ['manifest','vendor','vueMixin','product'],
        chunksSortMode:function (a, b) {
            var aIndex =chunksort.indexOf(a.names[0]);
            var bIndex =chunksort.indexOf(b.names[0]);
            return aIndex - bIndex;
    },
}),
]

3、下面详细说一个各个参数的意思：
filename: 就是编译后的文件名称和文件路径。
template: 模板文件html的位置，一个页面对应一个模板文件。
inject: js的引入位置，可以是 true、body、head、false，其中true和body是一样的，都是在body底部引入；head就是头部；false是不引入chunks中的js文件。
chunks: 如果使用了这个参数，那么就会按照参数中的入口名称引入js文件，引入的顺序不一定就是写的顺序。
chunksSortMode: 这个参数是管理chunks参数中入口文件的引入顺序的，有几个默认的参数 'dependency' 、'auto'、'none'、function(){}。重点说以下function吧，当文件间存在依赖时就必须使用特定的引入顺序才行，这时候function 就派上用场了，这个函数的用法和数组的排序函数有点像，见上面代码。

favicon.ico图标配置：

new HtmlWebpackPlugin({
      template: 'src/index.html',
      favicon:resolve(__dirname, 'static/name.ico'),
})

其它参数参考文档，不再赘述：
html-webpack-plugin用法全解
 HtmlWebpackPlugin中文文档
这两个文档足够对这个插件有一个全面透彻的了解。

多页面实践文章参考：
webpack 多页面最佳实践
 vue 如何实现多页面应用

最后编辑于：2022.07.01 10:55:09