webpack 动态输出-html-webpack-plugin 配置自定义模板

主要内容：

true|body：所有 JavaScript 资源都插入到 body 元素的顶部 head：所有 JavaScript 资源都插入到 head 元素中。 false：所有静态资源css和JavaScript不会注入到模板文件中，通常在需要自定义模板配置时使用。

通常我们基本不会在头部设置js，这样会导致最里面实例化挂载失败（即找不到dom）。

var HtmlWebpackPlugin = require('html-webpack-plugin')
 new HtmlWebpackPlugin({
      filename: 'index.html', 
      template: 'index.html', //本地自定义模板
      inject: true|body
 })

通常的方式

打包结果

如果设置为 false 会怎样？

我们可以试试，毫无疑问webpack 动态输出webpack 动态输出，页面肯定是出不来的。

什么情况下我们会设置为false呢？

我们一步步往下看

外壳保险盒实例

前面说过，为页面设置了不同的模板； 在项目中，我们也可以对所有页面使用相同的模板。

公共模板

不仅上述配置方式，另一种配置自定义模板的形式也能满足要求。 具体方法取决于模板引擎。 例如插件在不配置loader的情况下默认支持ejs模板引擎。 下面以ejs模板引擎为例进行说明。

    
    
    
    
    
     
    <link href="" rel="stylesheet">
    






<script type="text/javascript" src="">

htmlWebpackPlugin 虽然这是 html-webpack-plugin 插件在生成 html 文件过程中形成的数据，但这些数据可用于 html 模板文件。

var json = JSON.parse('')
console.log(json)

htmlWebpackPlugin 对象