Webpack使用HtmlWebpackPlugin插件来生成HTML文件

5 min read

Webpack的HtmlWebpackPlugin插件是一个用于生成HTML文件的插件。 它可以自动将打包后的JS和CSS文件引入到HTML文件中，并且可以根据指定的模板生成需要的HTML文件。

使用HtmlWebpackPlugin插件，需要先进行安装和配置：

  1. 安装HtmlWebpackPlugin插件：
npm install html-webpack-plugin --save-dev
  1. 在webpack.config.js中引入HtmlWebpackPlugin插件：
const HtmlWebpackPlugin = require('html-webpack-plugin');
  1. 配置HtmlWebpackPlugin插件：
plugins: [
  new HtmlWebpackPlugin({
    title: 'My App',
    template: './src/index.html'
  })
]

其中，title指定生成的HTML文件的文档标题，template指定模板文件的路径。

  1. 使用webpack打包生成HTML文件。

运行打包命令：

webpack

生成的HTML文件会被放置在output.path指定的目录下。可以在浏览器中打开生成的HTML文件查看效果。