前言：Static Site Generator (静态站点生成器)是一种将动态网站内容生成固定 HTML 文件的工具。它们通常会生成全站静态文件。
这里介绍一个 npm 包：static-site-generator-webpack-plugin-example 是一个简单的静态站点生成器插件，它基于 Webpack 和 React。该插件可以帮助你轻松地将动态网站转换为静态站点。本篇文章将重点介绍该插件的使用方法，包括安装、配置和使用，并提供示例代码。
安装
要使用 static-site-generator-webpack-plugin-example 插件，需要先安装 Node.js 和 Webpack。安装过程如下：
- 安装 Node.js
请参考 Node.js 官方网站进行安装 https://nodejs.org/en/download/。
- 安装 Webpack
使用 npm 安装 Webpack 运行时和 CLI 工具。
$ npm install webpack webpack-cli --save-dev
- 安装 static-site-generator-webpack-plugin-example
使用 npm 安装该插件。
$ npm install static-site-generator-webpack-plugin-example --save-dev
配置
- 创建一个全新的项目，并初始化 npm。
$ mkdir my-project $ cd my-project $ npm init
- 安装所需的依赖。
$ npm install react react-dom react-router-dom static-site-generator-webpack-plugin --save
- 创建入口文件。
创建一个名为 index.js 的文件，并导入 React 相关依赖。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------------- ---- -------------------
------ - ------ ------ - ---- -------------------
------ --- ---- --------
------ --------- ---- --------------------
------ --------- ---- --------------------
------ ----------- ---- ----------------------
------ ------------ ---- -----------------------
----- ------ - -
- ----- ---- ---------- --------- --
- ----- --------- ---------- --------- --
- ----- ----------- ---------- ----------- --
- ----- ---- ---------- ------------ -
--
----- ----- - ----- -- -
--------
----------------- -- -
------
----------------
---------------------------
-----------------
--
---
---------
--
----- ------ - -- -- ------------------------------------ ----
------ ------- -------- 创建页面组件
在 src/pages 文件夹下创建 IndexPage、AboutPage、ContactPage 和 NotFoundPage 文件，这些文件是实际渲染的页面。
示例代码（src/pages/IndexPage.js）如下：
-- -------------------- ---- -------
------ ----- ---- --------
----- --------- - ----- -- -
-----
--------- ---------
---------- -- -- ------ ---------
------
--
------ ------- ----------- 创建 Webpack 配置文件。
在项目根目录下创建 webpack.config.js 文件，并添加以下内容。
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------
----- -------------------------------- - ------------------------------------------------
----- ----------- - ----
----- ------ - -
- ----- ---- ------ ------ --
- ----- --------- ------ ------- --
- ----- ----------- ------ --------- -
--
-------------- - -
----- -------------
------ -------------
------- -
--------- ----------
----- ----------------------- --------
-------------- -----
--
-------- -
--- -------------------
--------- --------------
---
--- ----------------------------------
------ -------
------ ---------------- -- ------------
------- -
-------
-----------
-
--
--
------- -
------ -
-
----- ---------
---- -
------- --------------
--
-------- --------------
-
-
--
---------- -
----- ----
-
--该配置文件中包含了使用到的插件，其中 HtmlWebpackPlugin 用于生成 HTML 文件，而 StaticSiteGeneratorWebpackPlugin 则是用于生成静态站点的插件。
另外，该配置文件还包含了使用到的路由信息以及当前站点的公共访问路径 PUBLIC_PATH。
- 创建模板文件
在根目录下创建模板文件 template.ejs 文件，示例代码如下：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ---------- ----- ---------- ----- --------------- ---------------------------- ------------------- ----- ---------------- --------- ----------- ------------ ------- ------ ---- ------------ ---- -------- ------- -------- ----------- -------------------- ------- -------
该模板文件是简单的 HTML 页面，其中包含有站点的标题和一个带有 id 为 app 的 div 元素，它是 React 渲染出的组件树的根节点。
- 创建打包命令
在 package.json 文件中添加以下打包命令。
"scripts": {
"build": "webpack --mode=production"
},使用
在配置好 static-site-generator-webpack-plugin-example 插件之后，只需要执行打包命令即可生成静态站点。
$ npm run build
打包完成后，会在 dist 文件夹下生成静态 HTML 文件。通过打开 index.html 文件，你可以浏览到包含所有页面的静态站点。
总结
这是一个简单的，基于 React 和 Webpack 的静态站点生成器插件的使用教程。通过本篇文章，你可以了解 static-site-generator-webpack-plugin-example 插件的整个配置和使用过程，并掌握静态站点的基础知识。希望这篇文章能够给你带来指导和帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/80009