Webpack 插件之 HtmlWebpackPlugin

发表于 分类于

该插件将为你生成一个 HTML5 文件，用以服务 webpack 编译输出的 bundle。

安装

1
npm install --save-dev html-webpack-plugin # or yarn add --dev html-webpack-plugin

基础用法

该插件会为你生成一个 HTML5 文件，在文件的 body 标签中包含 webpack 编译输出的所有 bundle 文件。你只需要在 webpack 配置文件中启用该插件即可：

1
2
3
4
5
6
7
8
9
10
11
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "index.js",
  output: {
    path: path.resolve(__dirname, "./dist"),
    filename: "index_bundle.js",
  },
  plugins: [new HtmlWebpackPlugin()],
};

webpack 编译后会在 dist 目录下创建一个 index.html 文件，文件中将包含以下内容：

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>webpack App</title>
  </head>
  <body>
    <script src="index_bundle.js"></script>
  </body>
</html>

配置

要查看该插件所有配置项，参考插件文档。