自动构建html文件

我们上面提到过要依赖一个插件，HtmlWebpackPlugin，在npm包的名字是html-webpack-plugin，所以我们先安装这个插件模块，然后在配置文件中配置一下。

npm install --save-dev html-webpack-plugin

备注

插件，是一个数组，其中实现的是符合webpack插件约束格式的一个个的对象，这里的这个插件是用类来实现的。这个插件的这个类的形参提供的是一个对象，如果你会使用ts，就可以通过一些手段查看它的参数列表，或者你可以去相关文档来查看它的参数列表。

这是一个插件，所以现在我们引入了webpack的插件模块，我们在webpack中配置如下内容来启用这个插件。

const path = require("path");
+const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: {
    index: "/src/index.js",
    print: "/src/print.js",
  },
  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "dist"),
    clean: true,
  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      title: "资源输出",
+      filename: "webpack.html"
+    }),
+  ],
};

上面的插件的对象参数中，有很多可选的配置，可以去官方网站或者也可以通过它的ts支持来查看参数列表。这里我使用到了title，和一个可选的参数filename参数，来指定title标签中的内容以及输出的html（也可以不是html后缀）文件的名字，这个filename默认情况下是index.html。

这样我们配置了以前的打包内容清除，然后配置了插件来自动帮我们生成一个html，我们再次进行打包命令，如果你配置好了scripts，就可以使用npm run build。

|---dist
    |--- index.bundle.js
    |--- print.bundle.js
-   |--- index.html
+   |--- webpack.html

在webpack.html中的内容最后如下，和我们配置的是一致的。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>资源输出</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"><script defer src="index.bundle.js"></script><script defer src="print.bundle.js"></script></head>
  <body>
  </body>
</html>

自动构建html文件​

自动构建html文件