# @endiliey/static-site-generator-webpack-plugin 中文文档

规范地址：https://npmcn.com/package/%40endiliey/static-site-generator-webpack-plugin/

版本：4\.0\.0
npm 元数据更新时间：2022-04-05T07:38:43.466Z
中文译文更新时间：2026-11-13T16:55:55.321Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40endiliey/static-site-generator-webpack-plugin
原文对照：https://npmcn.com/package/%40endiliey/static-site-generator-webpack-plugin/?lang=original
项目主页：https://github.com/endiliey/static-site-generator-webpack-plugin
源码仓库：https://github.com/endiliey/static-site-generator-webpack-plugin

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：110 kB，18 个文件
- 模块格式：CommonJS
- TypeScript 类型：未声明
- 运行依赖：5 个
- 首次发布：2019-10-27T15:52:02.179Z
- 最新版本发布：2019-10-27T15:53:37.060Z
- 近 30 天下载量：16231（2026-10-14 至 2026-11-12，npm 官方下载统计）
- 已发布版本数：2（近 12 个月 0 个）

## 中文简介

最小的、无接触的静态站点发电机,由网包供电

## 安装

```sh
npm install @endiliey/static-site-generator-webpack-plugin
```

也可以使用：`pnpm add @endiliey/static-site-generator-webpack-plugin`、`yarn add @endiliey/static-site-generator-webpack-plugin`、`bun add @endiliey/static-site-generator-webpack-plugin`

## README

[![Build Status](https://img.shields.io/travis/endiliey/static-site-generator-webpack-plugin/master.svg?style=flat-square)](http://travis-ci.org/endiliey/static-site-generator-webpack-plugin) [![Coverage Status](https://img.shields.io/coveralls/endiliey/static-site-generator-webpack-plugin/master.svg?style=flat-square)](https://coveralls.io/r/endiliey/static-site-generator-webpack-plugin) [![Dependency Status](https://img.shields.io/david/endiliey/static-site-generator-webpack-plugin.svg?style=flat-square)](https://david-dm.org/endiliey/static-site-generator-webpack-plugin) [![npm](https://img.shields.io/npm/v/static-site-generator-webpack-plugin.svg?style=flat-square)](https://npmjs.org/package/static-site-generator-webpack-plugin)

# 静态站点生成器网络包插件

最小的,无接触的静态站点发电机由网包供电.

将服务器渲染的世界带到您的静态构建过程中 。 或提供一系列要渲染的路径,或 _自动爬行您的网站_,和一组匹配的 `index.html` 文件将在您的输出目录中通过执行您的自定义、 webpack 编译渲染功能来提供 .

此插件对通用库特别有效, 如 [反应](https://github.com/facebook/react) 财务报告和审定财务报表 [反应路由器](https://github.com/rackt/react-router) 因为它允许您在构建时提前交出您的路由,而不是在生产时需要节点服务器.

## 安装

```bash
$ npm install --save-dev static-site-generator-webpack-plugin
```

## 使用量

确保您安装了网络包, 例如 . `npm install -g webpack`

### 网络包装. config.js

```js
const StaticSiteGeneratorPlugin = require('static-site-generator-webpack-plugin');

module.exports = {

  entry: './index.js',

  output: {
    filename: 'index.js',
    path: 'dist',
    /* IMPORTANT!
     * You must compile to UMD or CommonJS
     * so it can be required in a Node context: */
    libraryTarget: 'umd'
  },

  plugins: [
    new StaticSiteGeneratorPlugin({
      paths: [
        '/hello/',
        '/world/'
      ],
      locals: {
        // Properties here are merged into `locals`
        // passed to the exported render function
        greet: 'Hello'
      }
    })
  ]

};
```

### 指数.js

同步渲染 :

```js
module.exports = function render(locals) {
  return '<html>' + locals.greet + ' from ' + locals.path + '</html>';
};
```

Async 通过回调渲染 :

```js
module.exports = function render(locals, callback) {
  callback(null, '<html>' + locals.greet + ' from ' + locals.path + '</html>');
};
```

承诺:

```js
module.exports = function render(locals) {
  return Promise.resolve('<html>' + locals.greet + ' from ' + locals.path + '</html>');
};
```

## 多重渲染

如果每次渲染需要生成多个文件,或者需要更改路径,可以返回一个对象而不是字符串,其中每个键是路径,而值是文件内容:

```js
module.exports = function render() {
  return {
    '/': '<html>Home</html>',
    '/hello': '<html>Hello</html>',
    '/world': '<html>World</html>'
  };
};
```

请注意,对于您在 `paths` 在插件配置中的数组.

## 默认本地

```js
// The path currently being rendered:
locals.path;

// An object containing all assets:
locals.assets;

// Advanced: Webpack's stats object:
locals.webpackStats;
```

您的配置中提供的其他本地人也可访问.

## 爬行模式

而不是手动提供路径列表, 您可以使用 `crawl` 选择自动爬行您的网站。 这将遵循所有相对链接和iframes, 执行您的渲染函数 :

```js
module.exports = {

  ...

  plugins: [
    new StaticSiteGeneratorPlugin({
      crawl: true
    })
  ]
};
```

请注意,可结合《公约》第22条使用 `paths` 选项以允许多个爬行器入口:

```js
module.exports = {

  ...

  plugins: [
    new StaticSiteGeneratorPlugin({
      crawl: true,
      paths: [
        '/',
        '/uncrawlable-page/'
      ]
    })
  ]
};
```

## 自定义文件名

通过提供最终路径 `.html`,您可以生成默认以外的自定义文件名 `index.html`。请注意,如果使用路由器,这可能会破坏与路由器的兼容性.

```js
module.exports = {

  ...

  plugins: [
    new StaticSiteGeneratorPlugin({
      paths: [
        '/index.html',
        '/news.html',
        '/about.html'
      ]
    })
  ]
};
```

## 全球

如果需要, 您可以在执行渲染函数时提供全局范围内存在的对象 。 如果您使用的某些库或工具假设浏览器环境,这尤其有用.

例如,当使用 Webpack 时 `require.ensure`,假设 `window` 已存在 :

```js
module.exports = {
  ...,
  plugins: [
    new StaticSiteGeneratorPlugin({
      globals: {
        window: {}
      }
    })
  ]
}
```

## 资产支助

模板.ejs

```ejs
<% css.forEach(function(file){ %>
<link href="<%- file %>" rel="stylesheet">
<% }); %>

<% js.forEach(function(file){ %>
<script src="<%- file %>" async></script>
<% }); %>
```

指数.js

```js
if (typeof global.document !== 'undefined') {
  const rootEl = global.document.getElementById('outlay');
  React.render(
    <App />,
    rootEl,
  );
}

export default (data) => {
  const assets = Object.keys(data.webpackStats.compilation.assets);
  const css = assets.filter(value => value.match(/\.css$/));
  const js = assets.filter(value => value.match(/\.js$/));
  return template({ css, js, ...data});
}
```

## 指定条目

此插件默认为已找到的第一个块 。 虽然在大多数情况下这应该可行,但如果需要,您可以指定条目名称:

```js
module.exports = {
  ...,
  plugins: [
    new StaticSiteGeneratorPlugin({
      entry: 'main'
    })
  ]
}
```

## 压缩支持

生成的文件可以被压缩 [压缩- webpack- 插件](https://github.com/webpack/compression-webpack-plugin),但首先要确保此插件在您的插件阵列中压缩-webpack-plugin之前出现 :

```js
const StaticSiteGeneratorPlugin = require('static-site-generator-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {
  ...

  plugins: [
    new StaticSiteGeneratorPlugin(...),
    new CompressionPlugin(...)
  ]
};
```

## 相关项目

-   [反应- 路由- 阵列](https://github.com/alansouzati/react-router-to-array) - 有助于避免硬编码的路线清单
-   [加兹比](https://github.com/gatsbyjs/gatsby) - 在这个插件上建造的有意见的静态站点生成器

## 许可证

[MIT 许可证](http://markdalgleish.mit-license.org/)

## 常见问题

### @endiliey/static-site-generator-webpack-plugin 是什么？

最小的、无接触的静态站点发电机,由网包供电

### 如何安装 @endiliey/static-site-generator-webpack-plugin？

在项目目录运行 npm install @endiliey/static-site-generator-webpack-plugin，或使用 pnpm add / yarn add / bun add。

### @endiliey/static-site-generator-webpack-plugin 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/endiliey\_\_static-site-generator-webpack-plugin 是否存在。

### @endiliey/static-site-generator-webpack-plugin 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @endiliey/static-site-generator-webpack-plugin 可以商用吗？

@endiliey/static-site-generator-webpack-plugin 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @endiliey/static-site-generator-webpack-plugin 的下载量有多少？

根据 npm 官方下载统计，@endiliey/static-site-generator-webpack-plugin 在 2026/10/14 – 2026/11/12 这 30 天内被下载 16,231 次，日均约 541 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @endiliey/static-site-generator-webpack-plugin 还在维护吗？

最新版本 4\.0\.0 发布于 2019/10/27（7 年前）；至今共发布 2 个版本，其中过去 12 个月发布了 0 个；首次发布于 2019/10/27。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。