(掌握)webpack插件-Html插件

HtmlWebpackPlugin

• 另外还有一个不太规范的地方：
  • 我们的HTML文件是编写在根目录下的，而最终打包的dist文件夹中是没有index.html文件的
  • 在进行项目部署的时，必然也是需要有对应的入口文件index.html
  • 所以我们也需要对index.html进行打包处理
• 对HTML进行打包处理我们可以使用另外一个插件：HtmlWebpackPlugin

npm install html-webpack-plugin -D

const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  //其他省略
  plugins:[
    new HtmlWebpackPlugin({//使用之后，打包的时候，入口文件index.html也会被打包进去
      title:"webpack案例"//这样可以生成index.html里面的标题<title>标题</title>
      template:"路径"//生成你自己指定的html模板(也就是下面的自定义模板)
    })
  ]
}

生成index.html分析

• 我们会发现，现在自动在dist文件夹中，生成了一个index.html的文件：
  • 该文件中也自动添加了我们打包的bundle.js文件

• 这个文件是如何生成的呢？
  • 默认情况下是根据ejs的一个模板来生成的
  • 在html-webpack-plugin的源码中，有一个default_index.ejs模块

自定义HTML模板

• 如果我们想在自己的模块中加入一些比较特别的内容：
  • 比如添加一个noscript标签，在用户的JavaScript被关闭时，给予响应的提示
  • 比如在开发vue或者react项目时，我们需要一个可以挂载后续组件的根标签
• 这个我们需要一个属于自己的index.html模块：

自定义模板数据填充

• 上面的代码中，会有一些类似这样的语法<% 变量 %>，这个是EJS模块填充数据的方式
• 在配置HtmlWebpackPlugin时，我们可以添加如下配置：
  • template：指定我们要使用的模块所在的路径
  • title：在进行htmlWebpackPlugin.options.title读取时，就会读到该信息(代码块在上面了)