在开发前端应用程序时，常常面临着搜索引擎爬虫无法正确爬取页面的问题。例如使用了 Ajax 动态加载数据、SPA（单页应用）等技术的应用程序，在搜索引擎爬虫访问时无法正确识别并爬取这些页面内容。而解决这一问题的技术手段之一，即预渲染（prerendering）。
预渲染便是将 SPA 应用程序等生成静态 HTML 页面，并将其存储到服务器上，使得即便搜索引擎访问时，也能够正确识别并爬取页面内容。而 prerender-webpack-plugin 便是前端webpack预渲染插件的一种，以下是其详细使用教程。
安装方式
安装 prerender-webpack-plugin 的方式如下所示：
npm install prerender-webpack-plugin --save-dev
使用步骤
使用 prerender-webpack-plugin 进行预渲染，一共有以下几个步骤：
- 安装
prerender-webpack-plugin。 - 在 webpack 配置文件中加入插件配置。
- 配置插件选项。
添加插件
在 webpack 配置文件中添加插件，如下所示：
const PrerenderSPAPlugin = require('prerender-webpack-plugin')
module.exports = {
...
plugins: [
new PrerenderSPAPlugin()
]
}这样，Webpack 编译时， PrerenderSPAPlugin 插件会被自动应用，并进行预渲染工作。
配置插件选项
prerender-webpack-plugin 插件有多个选项，其中必选项为 staticDir，其它可选项根据需求自行选择。
-- -------------------- ---- -------
----- ------------------ - -----------------------------------
-------------- - -
---
-------- -
--- --------------------
-- ---------------- ---- ------
---------- -------------------- --------
-- --------------------------------
------- - ---- ------------ ------------- --
-- -------------------
--------------- -----------------------------
-- --------------------------
---------------- -----
-- ---------------
--------------- -----
-- -----------
------- -
-- ------------ ------
-- --------- -----
-- ---------- ------------------ -- ------
--------- -------
-- -- --------- --
----- - --------------- -------------------------- -
--
--
-
-示例代码
下面是一个完整的使用示例：
-- -------------------- ---- -------
----- ---- - ---------------
----- ------------------ - -----------------------------------
-------------- - -
------ ----------------
------- -
----- ----------------------- ----------
----------- ---------
--------- ----------
--
-------- -
--- --------------------
-- ---------------
------- ---------- ---------
-- --------
---------- -------------------- --------
-- -----------------
--------------- --------------------------------
-- ------------------ ----- -----
---------------- -----
-- -----------
------- -
-- ------------ ------
-- --------- -----
-- ------
--------- -------
-- -- --------- --
----- - --------------- -------------------------- -
-
--
-
-本文总结
本文结合实例，详细介绍了前端 webpack 打包预渲染插件 prerender-webpack-plugin 的使用。对于 SPA 应用等需要预渲染的场景，该插件是一种非常实用的技术方案，具有较高的指导意义，值得相关前端工程师学习使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f71238a385564ab6747