html-webpack-plugin插件使用以及遇到的问题

一、webpack-dev-server配置实现了自动打包编译，并把编译成功的bundle.js放到内存中去=》服务器的目录中。【本身是在物理磁盘中】

二、除了要实现编译完的bundle.js文件要放到内存中去，html页面也要放到内存中去。
需要借助webpack的插件html-webpack-plugin来实现。

三、安装插件
npm install/i html-webpack-plugin --save-dev/-D //把插件安装到项目目录中。
注意：安装html-webpack-plugin插件的时候，会默认安装最新版本，对最新版本的webpack的安装还没有研究透彻，一直报错，所以选择了低版本的安装
npm install/i html-webpack-plugin@3.2.0 --save-dev/-D

四、操作步骤
1、在webpack的配置文件中添加配置（webpack.config.js）

const htmlWebpackPlugin = require("html-webpack-plugin");//引入插件
module.exports = {
  plugins: [//配置插件的节点
    new htmlWebpackPlugin = ({
      template: path.join(__dirname,'./src/index.html'), //指定模板页面，将来会根据指定的页面路径，去生成内存中的页面
      filename: 'index.html' //指定生成的页面的名称
    })
  ]
}

2、不需要手动去引入bundle.js了。html-webpack-plugin生成内存中的页面，已经正确的引入打包编译好的bundle.js文件了。

html-webpack-plugin插件的 作用：
1、自动在内存中根据指定页面生成一个内存的页面
2、自动把打包好的bundle.js文件追加到页面中去

借鉴文章地址：https://www.jianshu.com/p/6c64ecc822c4