1.新建文件src：index.html；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>webpack打包html</title>
</head>
<body>
<h1 id="title">hello html</h1>
</body>
</html>
2.新建webpack.config.js配置基础文件
const { resolve } = require("path");
module.exports = {
entry: './src/index.js',
output: {
filename: "built.js",
path: resolve(__dirname, "build"),
},
module: {
rules: [
]
},
plugins: [
],
mode: "development",//开发模式
}
3.使用插件html-webpack-plugin
loader:1.下载 2.使用
plugins:1.下载 2.引入 3.使用
html-webpack-plugin作用：默认会创建一个空的html，自动引入打包输出的所有资源（js/css）
1.下载插件
cnpm i html-webpack-plugin --save-dev
2.引入插件
const HtmlWebpackPlugin = require("html-webpack-plugin")
3.使用插件
new HtmlWebpackPlugin();
4.需要有内容结构的html文件
1.需求：需要有内容结构的html文件，用template实现。
2.template作用：复制 "./index.html"文件，并且自动引入打包输出的所有资源（js/css）
new HtmlWebpackPlugin({
template: "./index.html"
})
5.输入命令打包
输入：webpack
