1.安装

该插件会根据模板HTML创建一个带有打包资源的打包HTML文件。

npm i html-webpack-plugin

2.创建入口文件

E:\Code\learn\webpack\a04_html\src\index.js

console.log('Hello Yiu')

3.创建HTML模板

E:\Code\learn\webpack\a04_html\src\index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1 id="title">Hello Yiu</h1>
</body>
</html>

4.创建配置文件

E:\Code\learn\webpack\a04_html\webpack.config.js

const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'built.js',
    path: resolve(__dirname, 'build')
  },
  plugins: [
    new HtmlWebpackPlugin()
  ],
}

5.打包

webpack

这时，你就可以看到build文件夹下，built.js是index.js打包后的js文件。
还有一个index.html文件，如果在插件配置中没有写模板就是一个插件默认的index.html模板。

6.插件详细传参

https://github.com/jantimon/html-webpack-plugin#options

// ...

module.exports = {
  // ...
  plugins: [
    new HtmlWebpackPlugin({
      // 模板位置
        template: './src/index.html',
    })
  ],
}

webpack学习