Webpack是一个开源的JavaScript模块化打包工具，它可以把多个JavaScript文件打包成一个文件。使用Webpack可以将CSS、图片等静态资源也打包到同一个文件中，方便管理和维护。
Webpack的核心概念：
- Entry：入口文件，Webpack会从入口文件开始打包。
- Output：输出文件，Webpack打包后的文件会输出到指定的目录下。
- Loader：Webpack只能处理JavaScript文件，其他文件（如CSS、图片等）需要使用Loader进行转换。
- Plugin：Webpack的插件，可以用于处理各种任务，如压缩、拷贝文件等。
下面就来介绍如何使用Webpack打包HTML文件。
1. 安装Webpack
使用npm安装Webpack：
```
npm install webpack webpack-cli --save-dev
```
2. 创建项目目录
在项目根目录下创建如下文件夹和文件：
```
dist/
src/
index.html
index.js
webpack.config.js
```
其中，index.html是我们要打包的HTML文件，index.js是入口文件，webpack.config.js是Webpack的配置文件。
3. 配置Webpack
打开webpack.config.js文件，配置如下：
```javascript
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
```
其中，entry为入口文件，output为输出文件，filename为输出文件名，path为输出目录。
4. 安装HTML Webpack Plugin
使用npm安装HTML Webpack Plugin：
```
npm install html-webpack-plugin --save-dev
```
5. 配置HTML Webpack Plugin
打开webpack.config.js文件，添加如下代码：
```javascript
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
]
};
```
其中，HtmlWebpackPlugin为Webpack插件，template为要打包的HTML文件。
6. 配置Loader
Webpack只能处理JavaScript文件，所以我们需要使用Loader将HTML文件转换成JavaScript文件。使用npm安装html-loader：
```
npm install html-loader --save-dev
```
打开webpack.config.js文件，添加如下代码：
```javascript
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
module: {
rules: [
{
test: /\.html$/,
use: 'html-loader'
}
]
}
};
```
其中，module为Webpack的模块配置，rules为Loader的配置，test为匹配要处理的文件，use为要使用的Loader。
7. 打包
运行以下命令进行打包：
```
npx webpack
```
Webpack会自动读取webpack.config.js文件进行打包，打包后的文件会输出到dist目录下。
至此，我们就成功使用Webpack将HTML文件打包成JavaScript文件了。
