小白入门（webpck处理html资源）

前言：

从前几章，我可知，每当我们引入js和css的资源的时候，都是手动引入，在将来我们可以会有js,css文件随之增多，文件名字的改变，如果手动修改比较麻烦，这就是这章内容主要解决问题。

第一步：查看官方文档

点击跳转

第二步：跟着文档走：

安装：

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

在配置文件中添加这几句话：

const HtmlWebpackPlugin = require('html-webpack-plugin');
//插件
plugins: [new HtmlWebpackPlugin()]

注意：打包前，要把我们的html文件中引入的js文件删除，要不然打包后路径会出问题 

打包后，我们可以在dist目录下看到我们的html文件，打开可以看到我们已经自动引入js文件

但是我们的内容都不见了？

解决办法是在配置文件写下这句话：

 new HtmlWebpackPlugin({
          //以public/index.html文件创建新的html文件
          //新的html文件的特点：1.结构和原理一致 2.自动引入打包输出的资源
          template:path.resolve(__dirname,"public/index.html")
})

打包后，我们就可以在dist目录下看到完整的html文件 

新来的小伙伴记得看我的专栏，从前往后看，谢谢大家支持！

友友们，关注收藏支持一下