3.webpack打包HTML（入门之plugins）

        直接进行实操把

一、我们创建一个文件夹来放我们打包文件cs-webpack-plugins再在文件内创建src文件夹，然后在文件夹内我们创建index.js文件和index.html文件。我们随便写入一些代码如图：

 二、在文件夹cs-webpack-plugins下创建文件webpack.config.js文件。现在我们开始配置webpack.config.js文件

 文件内我们配置了入口文件路径        entry:'./src/index.js', 和输出文件

output:{

        filename:'build.js',

        path:resolve( __dirname, 'build')

    },

配置环境是测试环境development 

（如不懂可看上一期2.Webpack打包样式资源（入门））

因为我们是要打包html资源运用到plugins 是插件去处理这个html资源 所以我们需要下载-引入-使用。

所以我们在终端下载        命令：npm i html-webpack-plugin -D

 下载好插件之后我们去引入这个插件

 const HtmlWebpackPlugin = require("html-webpack-plugin") 去引入这个插件

因为HtmlWebpackPlugin是个构造函数或者说是类所以

在plugins中new直接运用new HtmlWebpackPlugin(）如上图

我们用webpack命令来运行一下文件观察一下有哪些变化。

如图生成了build.js 和index.html 两个文件。我们查看一下index.html文件 它默认引入了build.js这个文件。

 所以HtmlWebpackPlugin会创建一个空的html文件并自动引入打包输出的所有资源（js/css）。

三、提出需求

需要一个有结构的html文件

加一个配置选项

{template:'./src/index.html'}

 我们再去运行一次 webpack

查看打包文件的index.html

输出资源就多了个结构 。

各位可自行测试。

本次总结基于哔哩哔哩up主：尚硅谷  的视频《尚硅谷最新版Webpack5实战教程(从入门到精通)》整合而来。