webpack static site generator

Webpack 静态站点生成器

一个 Webpack 插件，用于根据一组路由生成静态站点。这是为了与 Vue.js CLI 生成的项目一起使用而编写的，因为我对其他静态站点生成器没有任何运气。

安装

npm i --save-dev webpack-static-site-generator

或者

yarn add webpack-static-site-generator -D

用法

在webpack.conf.js中：

 var StaticSiteGenerator = require ( 'webpack-static-site-generator' )

// Add the plugin to the plugin array
plugins: [
    new StaticSiteGenerator (
        // path to the output dir
        path . join ( __dirname , './dist' ) , 
        // array of routes to generate
        [ '/' . '/about' , '/blog' , '/blog/blog-post-1' ] ,
        // [OPTIONAL] element (in querySelector style) to wait for before rendering.
        // defaults to 'body'
        '.main-container'
    )
]

输出将如下所示：

 .
├── index.html
├── about
│   └── index.html
└── blog
    ├── blog-post-1
    │   └── index.html
    └── index.html

它是如何运作的

Webpack 为您的网站生成资产后，此插件将执行以下操作：

1. 使用express提供指定的输出目录
2. 使用 Nightmare 加载每个提供的路线
3. 将每个路由的 HTML 保存到文件系统

在 Travis CI 上使用

Nightmare 使用 Electron 渲染页面，可能需要在 Linux 机器上进行额外配置，包括 Travis CI。由于 Electron 不是完全无头的，因此我们需要设置xvfb （X 虚拟帧缓冲区）来为 Electron 提供可用于渲染的虚拟显示器。 xvfb这个插件已经给我们设置好了，需要的时候我们只需要安装即可。

将以下内容添加到您的.travis.yml ：

 sudo : required
addons :
  apt :
    packages :
      - xvfb
      - libxss1

其他 CI 系统可能还需要额外配置。

问题？

该插件尚未经过广泛测试。我在一个 Vue.js CLI 项目中使用它，并且运行得很好。如果您遇到任何问题，请创建一个问题，我会看看我能做些什么。