39-6 打包html的plugin

我们的index.html文件是存放在项目的根目录下的。但是 在真实发布项目时，发布的是dist文件夹中的内容，但是dist文件夹中如果没有index.html文件，那么打包的js 等文件也就没有意义了

所以，我们需要将index.html文件打包到dist文件夹中，这个时候就可以使用HtmlWebpackPlugin插件

HtmlWebpackPlugin插件可以为我们做这些事情：

1. 自动生成一个index.html文件(可以指定模板来生成)

2. 将打包的js文件，自动通过script标签插入到body中

 

安装HtmlWebpackPlugin插件:

npm install html-webpack-plugin --save-dev

使用插件，修改webpack.config.js文件中plugins部分的内容如下：

1.导入插件

 

const HtmlWebpackPlugin = require('html-webpack-plugin')  //html打包插件

 2. 声明插件

 

      //HTMl打包插件  其中template属性指明打包那个html
      new HtmlWebpackPlugin({template:'index.html'}),

 

其中 这里的template表示根据什么模板来生成index.html 。

注意事项：如果存在 output中添加的publicPath属性 ，，， 我们需要删除之前在output中添加的publicPath属性，，否则插入的script标签中的src可能会有问题。

因为 我们现在的 index.html 是在dist文件夹下的了。。。。还有就是它会自己引用打包的JS 我们在index.html中 什么都不用写

 

打包出现这个错误：

TypeError: Cannot read property 'initialize' of undefined

解决方案： 降低版本 即 直接用 

 

    "html-webpack-plugin": "^2.30.1",

webpack3.6.0 推荐用 2.30.1 这个版本哦 自己改即可