6-webpack自动生成HTML

前面讲到自动生成main.js,这里自动生成index.html,并且会自动导入main.js,问题,解决方法,实现方法
https://www.npmjs.com/package/html-webpack-plugin

一.问题

前面我们讲到利用webpack-dev-server插件监听index.js的变化自动在内存中生成main.js,但是index.html如果发生变化,该如何呢

二.解决方法

将index.html文件也放入内存中,并且监听它的变化,而且它还会自动导入内存中的main.js文件,省去在html文件中导入/main.js

三.实现方法

• 安装html-webpack-plugin插件
  npm i html-webpack-plugin -D
• 在webpack.config.js中配置该插件
  • 导入模块
    const htmlWebpackPlugin=require("html-webpack-plugin")
  • 创建插件
    new htmlWebpackPlugin({})
  • 配置插件
    • 指定模板页面(需要转换的页面)
    • 指定生成页面的名称
      template:path.join(__dirname,"./src/index.html"),
      filename:"index.html"

• 运行npm run dev
  会找到webpack.config.js中的plugin中配置的插件执行/或者是package.json文件中的scripts中的dev执行

  
  image.png
  image.png
  

  以上说明会自动导入main.js

  
  image.png
  image.png