webpack插件解析：HtmlWebpackPlugin是干什么的以及如何使用它

HtmlWebpackPlugin是一个出现频率比较高的webpack插件，本文对其作用和配置作一番比较详细的分析（本文的配置均在webpack.config.js中进行）。

为何使用它

简单来说，HtmlWebpackPlugin是用于生成html文件。我们的疑问可能在于，webpack本身不能生成html文件吗？事实上，默认的webpack主要是用于处理js文件的依赖图构建和打包，当需要生成html文件时，便需要使HtmlWebpackPlugin插件。

如何安装

作为开发依赖安装即可：

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

如何在webpack.config.js中配置该插件

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports  = {

  ...

  plugins: [new HtmlWebpackPlugin()]

};

以上配置中，首先使用了require引入插件，首字母开头表明是一个构造函数，而后使用new语句创建一个实例，并将其作为webpackConfig的plugins选项的一个数组成员，这样表示webpack打包时将使用HtmlWebpackPlugin插件。

这里没有做HtmlWebpackPlugin的任何额外配置，实际上它的默认配置将会生效。

默认配置是如何工作的

在以上配置中，HtmlWebpackPlugin就已经会生效，只不过是应用的默认配置。默认配置如下：

默认配置会在出口目录中（通过output.path选项配置）生成一个index.html文件；
生成的index.html文件将会以script标签的形式引入每一个输出js文件（通过output.filename选项配置）。

现在我们把其他基本配置补充完整：

const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

    mode:'development',

    entry:{

        app:path.resolve(__dirname,'./index.js'),

        test:path.resolve(__dirname,'./test.js')

    },

    output:{

        path: path.resolve(__dirname,'./dist'),

        filename:'[name]_bundle.js'

    },

    plugins:[new HtmlWebpackPlugin()]

}

以上配置中，先抛开HtmlWebpackPlugin来分析打包结果：由于项目中存在两个入口，出口（输出文件）使用了占位符，因此结果是在dist目录下生成两个js文件即app_bundle.js和test_bundle.js两个文件。

根据上面所述的默认配置，那么除此之外，还会在dist目录下生成一个index.html文件，它以script标签的形式引入app_bundle.js和test_bundle.js，即：

<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8">

    <title>Webpack App</title>

  </head>

  <body>

  <script type="text/javascript" src="app_bundle.js"></script>

  <script type="text/javascript" src="test_bundle.js"></script>

  </body>

</html>

修改默认配置

假如想要修改默认配置，只需要在在实例化HtmlWebpackPlugin的对象时，传入一个配置对象即可，如：

const htmlPlugin = new HtmlWebpackPlugin({

    template:path.join(__dirname,'./public/index.html'),

    filename: 'index.html'

});

module.exports = {

  ...

  plugins: [new HtmlWebpackPlugin()]

};

常见应用：在内存中生成index.html文件

以上案例中，我们实现了生成物理的index.html文件，即在项目的dist目录下，是可以看见index.html的。有另外一种常见情况，即我们需要在内存中生成index.html文件，这时内存中的index.html中是在资源管理器中看不到的。我们何时会有这样的奇怪需求呢？

试想这样的应用场景：

我们的项目中需要实时预览效果，需要启动一个本地服务器，例如需要通过http://localhost:8080这样的方式访问index.html文件。显然我们对项目做的每一个更改，webpack都会重新打包，并反映到index.html文件中去。

这听起来是完全可行的，问题在于：

webpack打包时读写磁盘去生成目标文件，由于物理磁盘读写速度非常有限，很可能导致预览滞后。

因此我们可以生成一个内存中的index.html文件用于浏览器实时预览，由于内存读写速度明显快于物理磁盘，因此实时预览也更加及时。

如何实现呢？

我们只需要安装webpack-dev-server，并启动一个服务即可。这时HtmlWebpackPlugin将在内存中生成html文件，而不是在出口目录中。
使用 webpack-dev-server后，出口目录中的js文件同时会在内存中生成，并被内存中的index.html文件引入。

限于篇幅，这里不再赘述webpack-dev-server的作用机制及配置方法。