静态网站是指在服务器端完成渲染后，直接把 HTML 文件传给客户端，客户端无需进行 Server Side Render (SSR)。这种方式免去了服务端渲染的开销，可以大大提升网站的性能和响应速度。
static-render-html-webpack-plugin 是一个 Webpack 插件，可以帮助我们生成静态 HTML 页面。本文将详细介绍该插件的使用方法，并提供示例代码以帮助读者快速掌握插件的使用。
安装
我们可以通过 npm 安装 static-render-html-webpack-plugin，命令如下：
npm install static-render-html-webpack-plugin --save-dev
使用
使用 static-render-html-webpack-plugin 需要在 webpack 配置文件中添加相应的配置。示例如下：
-- -------------------- ---- -------
----- ----------------------------- - ---------------------------------------------
-------------- - -
-------- -
--- -------------------------------
------- -----------
--------- ----------------------
---------- -----------
--
-
--上述配置中，我们定义了 routes、template 和 outputDir 等参数。
routes
routes 定义了需要渲染的页面路径。在上面的示例中，我们只需要渲染 /about 这个页面。
template
template 定义了模板文件的路径。模板文件是 static-render-html-webpack-plugin 用来生成 HTML 文件的基础模板，其中我们可以定义页面的头部、尾部信息以及页面的结构。
模板文件需要通过 {%- root -%} 标记定义页面的占位符，static-render-html-webpack-plugin 会根据页面的路径以及配置信息将占位符替换成相应的 HTML 内容。
outputDir
outputDir 定义了生成 HTML 文件的路径。在上面的示例中，我们定义了 HTML 文件的输出路径为 ./public 目录下。
示例代码
下面是一个完整的示例代码，该代码演示了如何使用 static-render-html-webpack-plugin 生成静态 HTML 文件。
webpack 配置文件：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------------------- - ---------------------------------------------
-------------- - -
----- --------------
------ -
------ -----------------
------ ----------------
--
------- -
--------- ------------
----- ----------------------- ---------
--
-------- -
--- -------------------------------
------- -----------
--------- ----------------------
---------- -----------
--
-
--模板文件 template.html：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
---------- ---------- -----------
----- --------------- ---------------------------- -------------------
-------
------
--------
------- ---------- --------
-----
----
------ ----------------------
------ ----------------------------
-----
------
---------
------
---- ----------------
--- --------- ---
------
-------
--------
---- ---- -- -----------
---------
-------
-------about.js：
document.querySelector('.content').innerHTML = '<p>About Page</p>';执行 yarn build 后，static-render-html-webpack-plugin 可以将 /about 页面的 HTML 内容自动生成到 public/about.html 文件中。打开 public/about.html 文件，可以看到下面的 HTML 代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------ ------------
----- --------------- ---------------------------- -------------------
-------
------
--------
--------- ---------
-----
----
------ ----------------------
------ ----------------------------
-----
------
---------
------
---- ----------------
-------- --------
------
-------
--------
---- ---- -- -----------
---------
-------
-------结论
static-render-html-webpack-plugin 是一个强大的工具，能够帮助我们快速生成静态 HTML 页面，提升页面的性能和响应速度。本文介绍了该插件的使用方法及示例代码，希望读者能够通过本文了解 static-render-html-webpack-plugin，掌握使用该插件的技巧，并在实际开发中使用该插件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671cd30d092702382290b
