webpack static site generator

Gerador de site estático Webpack

Um plugin Webpack para gerar um site estático baseado em um conjunto de rotas. Isso foi escrito para funcionar com um projeto gerado pela CLI Vue.js, já que não estava tendo sorte com outros geradores de sites estáticos.

Instalação

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

OU

yarn add webpack-static-site-generator -D

Uso

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

A saída será semelhante a esta:

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

Como funciona

Depois que o Webpack gera os ativos para o seu site, este plugin faz o seguinte:

1. Atende o diretório de saída especificado usando express
2. Carrega cada rota fornecida usando Nightmare
3. Salva o HTML de cada rota no sistema de arquivos

Usando no Travis CI

Nightmare usa Electron para renderizar as páginas e pode exigir configuração extra em máquinas Linux, incluindo Travis CI. Como o Electron não é totalmente headless, precisamos configurar xvfb (X Virtual Frame Buffer) para fornecer ao Electron uma exibição virtual que ele possa usar para renderização. Este plugin já está configurado para nós xvfb quando necessário, só precisamos instalá-lo.

Adicione o seguinte ao seu .travis.yml :

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

Configuração extra também pode ser necessária para outros sistemas CI.

Problemas?

Este plugin não foi extensivamente testado. Eu o uso em um projeto CLI Vue.js e funciona muito bem. Se você tiver algum problema com isso, crie um problema e verei o que posso fazer.