具体的实现方式就需要借助于 html-- 插件来实现，这个插件也是一个第三方的 npm 模块，我们这里同样需要单独安装这个模块，具体操作如下：
$ npm install html-webpack-plugin --save-dev
安装完成过后，回到配置文件，载入这个模块，不同于 clean--，html-- 插件默认导出的就是插件类型，不需要再解构内部成员，具体如下：
const HtmlWebpackPlugin = require('html-webpack-plugin')
有了这个类型过后，回到配置对象的属性中，同样需要添加一下这个类型的实例对象，完成这个插件的使用，具体配置代码如下：
// ./webpack.config.jsconst HtmlWebpackPlugin = require('html-webpack-plugin')const { CleanWebpackPlugin } = require('clean-webpack-plugin')module.exports = {entry: './src/main.js',output: {filename: 'bundle.js'},plugins: [new CleanWebpackPlugin(),new HtmlWebpackPlugin()]}
最后我们回到命令行终端，再次运行打包命令，此时打包过程中就会自动生成一个 index.html 文件到 dist 目录 。我们找到这个文件，可以看到文件中的内容就是一段使用了 .js 的空白 HTML，具体结果如下：
至此，就可以动态生成应用所需的 HTML 文件了，但是这里仍然存在一些需要改进的地方：
也就是说，还需要我们能够充分自定义这个插件最终输出的 HTML 文件 。
如果只是简单的自定义，我们可以通过修改的参数来实现 。
我们回到的配置文件中，这里我们给构造函数传入一个对象参数，用于指定配置选项 。其中，title 属性设置的是 HTML 的标题，我们把它设置为。meta 属性需要以对象的形式设置页面中的元数据标签，这里我们尝试为页面添加一个设置，具体代码如下：
// ./webpack.config.jsconst HtmlWebpackPlugin = require('html-webpack-plugin')const { CleanWebpackPlugin } = require('clean-webpack-plugin')module.exports = {entry: './src/main.js',output: {filename: 'bundle.js'},plugins: [new CleanWebpackPlugin(),new HtmlWebpackPlugin({title: 'Webpack Plugin Sample',meta: {viewport: 'width=device-width'}})]}
完成以后回到命令行终端，再次打包，然后我们再来看一下生成的 HTML 文件，此时这里的 title 和 meta 标签就会根据配置生成，具体结果如下：
如果需要对 HTML 进行大量的自定义，更好的做法是在源代码中添加一个用于生成 HTML 的模板，然后让 html-- 插件根据这个模板去生成页面文件 。
我们这里在 src 目录下新建一个 index.html 文件作为 HTML 文件的模板，然后根据我们的需要在这个文件中添加相应的元素 。对于模板中动态的内容，可以使用模板语法输出，模板中可以通过 . 访问这个插件的配置数据，例如我们这里输出配置中的 title 属性，具体代码如下：