使用HTML Webpack插件生成HTML文件

原创

XOSG 2022-03-03 18:22:27 ©著作权

文章标签 html css javascript 其他 文章分类 Webpack 前端开发

©著作权归作者所有：来自51CTO博客作者XOSG的原创作品，请联系作者获取转载授权，否则将追究法律责任

虽然大多数人主要使用Webpack作为他们的JS脚本，但总有一个部署的最后部分被遗忘：HTML。在制作中我们经常有我们想要插入的额外脚本（例如Google Analytics），我们也希望script在缩小的JavaScript和CSS中插入一个标记，每次我们生成带有散列的文件时，它们可能会有不同的文件名。结束。

配置生产

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

<span style="color:#000000"><span style="color:#ffffff"><code>npm install html-webpack-plugin --save-dev
</code></span></span>

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

<span style="color:#000000"><span style="color:#ffffff"><code><span style="color:#66d9ef">var</span> <span style="color:#a6e22e">HtmlWebpackPlugin</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">require</span><span style="color:#f8f8f2">(</span><span style="color:#e6db74">'html-webpack-plugin'</span><span style="color:#f8f8f2">);</span>
</code></span></span>

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

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

<span style="color:#000000"><span style="color:#ffffff"><code><span style="color:#a6e22e">plugins</span><span style="color:#f8f8f2">:</span> <span style="color:#f8f8f2">[</span>
  <span style="color:#f8f8f2">...</span>
  <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">HtmlWebpackPlugin</span><span style="color:#f8f8f2">({</span>
    <span style="color:#a6e22e">template</span><span style="color:#f8f8f2">:</span> <span style="color:#e6db74">'index.template.ejs'</span><span style="color:#f8f8f2">,</span>
    <span style="color:#a6e22e">inject</span><span style="color:#f8f8f2">:</span> <span style="color:#e6db74">'body'</span><span style="color:#f8f8f2">,</span>
  <span style="color:#f8f8f2">})</span>
<span style="color:#f8f8f2">],</span>
</code></span></span>

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

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

<span style="color:#000000"><span style="color:#ffffff"><code><span style="color:#75715e"><!DOCTYPE html></span>
<span style="color:#f92672"><html></span>
  <span style="color:#f92672"><head></span>
    <span style="color:#f92672"><meta</span> <span style="color:#a6e22e">http-equiv=</span><span style="color:#e6db74">"Content-type"</span> <span style="color:#a6e22e">content=</span><span style="color:#e6db74">"text/html; charset=utf-8"</span><span style="color:#f92672">/></span>
    <span style="color:#f92672"><title></span>Sample App<span style="color:#f92672"></title></span>
  <span style="color:#f92672"></head></span>
  <span style="color:#f92672"><body></span>
    <span style="color:#f92672"><div</span> <span style="color:#a6e22e">id=</span><span style="color:#e6db74">'root'</span><span style="color:#f92672">></div></span>
  <span style="color:#f92672"></body></span>
<span style="color:#f92672"></html></span>
</code></span></span>

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

生成的HTML文件如下所示：

<span style="color:#000000"><span style="color:#ffffff"><code><span style="color:#75715e"><!DOCTYPE html></span>
<span style="color:#f92672"><html></span>
  <span style="color:#f92672"><head></span>
    <span style="color:#f92672"><meta</span> <span style="color:#a6e22e">http-equiv=</span><span style="color:#e6db74">"Content-type"</span> <span style="color:#a6e22e">content=</span><span style="color:#e6db74">"text/html; charset=utf-8"</span><span style="color:#f92672">/></span>
    <span style="color:#f92672"><title></span>Sample App<span style="color:#f92672"></title></span>
    <span style="color:#f92672"><link</span> <span style="color:#a6e22e">href=</span><span style="color:#e6db74">"styles-4585896ecd058603fc99.css"</span> <span style="color:#a6e22e">rel=</span><span style="color:#e6db74">"stylesheet"</span><span style="color:#f92672">></span>
  <span style="color:#f92672"></head></span>
  <span style="color:#f92672"><body></span>
    <span style="color:#f92672"><div</span> <span style="color:#a6e22e">id=</span><span style="color:#e6db74">'root'</span><span style="color:#f92672">></div></span>
    <span style="color:#f92672"><script </span><span style="color:#a6e22e">type=</span><span style="color:#e6db74">"text/javascript"</span> <span style="color:#a6e22e">src=</span><span style="color:#e6db74">"javascripts-4585896ecd058603fc99.js"</span><span style="color:#f92672">></script></span>
  <span style="color:#f92672"></body></span>
<span style="color:#f92672"></html></span>
</code></span></span>

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

使用Webpack Dev Server进行配置

我没有使用用于生产HTML的模板和我在开发中使用的静态文件，而是使用相同的模板，以阻止我的HTML在环境之间失去同步。您可能更喜欢将它们分开，但对于我的大多数项目，我想要相同的HTML结构，并且我很高兴相信HTML Webpack插件可以将正确的脚本插入到正确的位置。

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

<span style="color:#000000"><span style="color:#ffffff"><code><span style="color:#f8f8f2">...</span> <span style="color:#a6e22e">other</span> <span style="color:#a6e22e">requires</span> <span style="color:#a6e22e">here</span>
<span style="color:#66d9ef">var</span> <span style="color:#a6e22e">HtmlWebpackPlugin</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">require</span><span style="color:#f8f8f2">(</span><span style="color:#e6db74">'html-webpack-plugin'</span><span style="color:#f8f8f2">);</span>

<span style="color:#a6e22e">module</span><span style="color:#f8f8f2">.</span><span style="color:#a6e22e">exports</span> <span style="color:#f92672">=</span> <span style="color:#f8f8f2">{</span>
  <span style="color:#f8f8f2">...,</span>
  <span style="color:#a6e22e">entry</span><span style="color:#f8f8f2">:</span> <span style="color:#f8f8f2">[...],</span>
  <span style="color:#a6e22e">output</span><span style="color:#f8f8f2">:</span> <span style="color:#f8f8f2">{</span>
    <span style="color:#a6e22e">path</span><span style="color:#f8f8f2">:</span> <span style="color:#a6e22e">path</span><span style="color:#f8f8f2">.</span><span style="color:#a6e22e">join</span><span style="color:#f8f8f2">(</span><span style="color:#a6e22e">__dirname</span><span style="color:#f8f8f2">,</span> <span style="color:#e6db74">'dist'</span><span style="color:#f8f8f2">),</span>
    <span style="color:#a6e22e">filename</span><span style="color:#f8f8f2">:</span> <span style="color:#e6db74">'bundle.js'</span><span style="color:#f8f8f2">,</span>
    <span style="color:#a6e22e">publicPath</span><span style="color:#f8f8f2">:</span> <span style="color:#e6db74">'/'</span>
  <span style="color:#f8f8f2">},</span>
  <span style="color:#a6e22e">plugins</span><span style="color:#f8f8f2">:</span> <span style="color:#f8f8f2">[</span>
    <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">webpack</span><span style="color:#f8f8f2">.</span><span style="color:#a6e22e">HotModuleReplacementPlugin</span><span style="color:#f8f8f2">(),</span>
    <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">HtmlWebpackPlugin</span><span style="color:#f8f8f2">({</span>
      <span style="color:#a6e22e">template</span><span style="color:#f8f8f2">:</span> <span style="color:#e6db74">'index.template.ejs'</span><span style="color:#f8f8f2">,</span>
      <span style="color:#a6e22e">inject</span><span style="color:#f8f8f2">:</span> <span style="color:#e6db74">'body'</span><span style="color:#f8f8f2">,</span>
    <span style="color:#f8f8f2">})</span>
  <span style="color:#f8f8f2">],</span>
  <span style="color:#a6e22e">module</span><span style="color:#f8f8f2">:</span> <span style="color:#f8f8f2">{...}</span>
<span style="color:#f8f8f2">};</span>
</code></span></span>

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

现在，当我启动开发服务器时，我看到生成的HTML，一切都像以前一样工作。任何时候我需要更改我的HTML，我可以在模板中这样做，让我的开发和生产HTML环境保持完全同步！

如果您想查看这个项目的实际操作，您可以看到react-css-modules-webpack存储库，其中我添加了上述所有功能。