#yyds干货盘点#使用 HTML Webpack 插件生成 HTML 文件-CFANZ编程社区

虽然大多数人主要将 Webpack 用于他们的 JS 脚本，但部署的最后一个部分总是被遗忘：HTML。在生产环境中，我们经常要插入额外的脚本（例如 Google Analytics），并且我们还希望script在缩小的 JavaScript 和 CSS 中插入一个标签，因为我们每次生成带有哈希的文件时，它们可能会有不同的文件名结尾。

最近，我遇到了html-webpack-plugin，并且惊讶地发现，无论是在使用 Webpack Dev Server 的开发中还是在生产中，添加到应用程序中以便为我生成所有的 HTML 是多么容易。继我上一篇关于使用 Webpack 的 CSS 模块的文章之后，今天我将使用该代码库并使用 HTML Webpack 插件自动化部署的 HTML 端。

为生产配置

第一步是安装插件，通过 npm 完成：

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

然后，为了配置我们的生产部署，我将webpack.config.prod.js首先通过需要插件来编辑我的文件：

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

接下来，我将在数组中添加一个条目，在该plugins数组中使用两个属性实例化插件：

template定义插件将用于生成 HTML 的模板。我很快就会创建这个。
inject: body告诉插件将任何 JavaScript 注入页面底部，就在结束</body>标记之前，而不是注入<head>.

plugins: [
  ...
  new HtmlWebpackPlugin({
    template: 'index.template.ejs',
    inject: 'body',
  })
],

这是我们唯一需要的配置！该插件将自动包含您使用 Webpack 生成的所有文件。它同时支持 JS 和 CSS 文件，因此非常适合我们的 CSS 模块项目。

最后我需要创建我的模板。这使用EJS模板系统，如果您需要将任何值传递到应该输出到 HTML 的插件中，这将非常有用。在我们的例子中，我们没有，所以我们的模板看起来像这样：

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
    <title>Sample App</title>
  </head>
  <body>
    <div id='root'></div>
  </body>
</html>

而已！从包中生成的资源将被放入 HTML 的正确位置。我现在可以运行webpack --config webpack.config.prod.js并看到生成了三个文件；我的 JS，我的 CSS，现在index.html也是。

生成的 HTML 文件如下所示：

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
    <title>Sample App</title>
    <link href="styles-4585896ecd058603fc99.css" rel="stylesheet">
  </head>
  <body>
    <div id='root'></div>
    <script type="text/javascript" src="javascripts-4585896ecd058603fc99.js"></script>
  </body>
</html>

如您所见，CSS 和 JS 已放入文件中。

使用 Webpack 开发服务器进行配置

与其拥有一个用于我的生产 HTML 的模板和一个我在开发中使用的静态文件，我宁愿为两者使用相同的模板，以防止我的 HTML 在环境之间不同步。您可能更喜欢将它们分开，但对于我的大多数项目，我想要相同的 HTML 结构，并且我很高兴相信 HTML Webpack 插件可以将正确的脚本插入正确的位置。

我可以编辑webpack.config.dev.js使用插件：

... other requires here
var HtmlWebpackPlugin = require('html-webpack-plugin');


module.exports = {
  ...,
  entry: [...],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin({
      template: 'index.template.ejs',
      inject: 'body',
    })
  ],
  module: {...}
};

这与以前相同，但配置有一个更容易被忽略的变化：我已经output.publicPath从/static简单/的 . 这意味着开发服务器将在根目录生成文件，这意味着我可以加载localhost:3000并查看我生成的 HTML 而无需访问/static/index.html. 将所有生成的 JavaScript 和 CSS 保留在这个根级别有点麻烦，但我不介意，因为我使用的是开发服务器，并且这些文件实际上并没有写入磁盘。如果您想将所有生成的文件保存在一个文件夹中，您可以设置publicPath为/static（或任何您想要的）并在处理您的应用程序时使用该 URL。

现在，当我启动开发服务器时，我看到生成的 HTML 并且一切正常。每当我需要更改我的 HTML 时，我都可以在模板中进行更改，并使我的开发和生产 HTML 环境保持完美同步！