webpack static site generator

Generador de sitios estáticos Webpack

Un complemento de Webpack para generar un sitio estático basado en un conjunto de rutas. Esto fue escrito para funcionar con un proyecto generado por la CLI de Vue.js, ya que no tuve suerte con otros generadores de sitios estáticos.

Instalación

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

O

yarn add webpack-static-site-generator -D

Uso

En 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'
    )
]

La salida se verá así:

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

como funciona

Después de que Webpack genera los recursos para su sitio, este complemento hace lo siguiente:

1. Sirve el directorio de salida especificado usando express
2. Carga cada ruta proporcionada usando Nightmare
3. Guarda el HTML de cada ruta en el sistema de archivos.

Usando en Travis CI

Nightmare usa Electron para representar las páginas y puede requerir una configuración adicional en máquinas Linux, incluido Travis CI. Dado que Electron no es completamente autónomo, necesitamos configurar xvfb (X Virtual Frame Buffer) para darle a Electron una pantalla virtual que pueda usar para renderizar. Este complemento ya está configurado para nosotros xvfb cuando sea necesario, solo necesitamos instalarlo.

Agregue lo siguiente a su .travis.yml :

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

También es posible que se requiera una configuración adicional para otros sistemas CI.

¿Asuntos?

Este complemento no ha sido probado exhaustivamente. Lo uso en un proyecto CLI de Vue.js y funciona bastante bien. Si tiene algún problema, cree un problema y veré qué puedo hacer.