多页面中 一部分的头部和底部的修改

Question

由于页面的业务比较复杂 并且头部文件有区分，但有的页面是用的相同的头部文件 所以想把头部文件抽取出来 但是在页面里引用的时候应该如何引用。

new HtmlWebpackPlugin({
        // favicon:'./src/img/favicon.ico', //favicon路径
        filename: `./${item}.html`, //生成的html存放路径，相对于 path
        template: `./src/pages/${item}.html`,
        chunks: chunks,
        inject: true, //允许插件修改哪些内容，包括head与body
        hash: true, //为静态资源生成hash值
        minify: { //压缩HTML文件
            removeComments: true, //移除HTML中的注释
            collapseWhitespace: false //删除空白符与换行符
        }
    })

Answer 1

html-webpack-plugin系列文章

Answer 2

htmlWebpackPlugin插件是可以写多个的。
笨一点的办法就是你有几个页面，就new几个htmlWebpackPlugin实例，
好一点的办法就是按页面注入规则的不同，定制不同的模板，别忘了htmlWebpackPlugin也是支持使用模板引擎来动态注入所有生成的bundle的，如果使用ejs的话，可以这么使用

"<%= htmlWebpackPlugin.files.chunks %>

访问到所有生成的chunks，比如你想注入一个vendor，那么就这么写

 <script src="<%= htmlWebpackPlugin.files.chunks.vendor.entry %>"></script>