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 を使用してページをレンダリングするため、Travis CI などの Linux マシンで追加の構成が必要になる場合があります。 Electron は完全にヘッドレスではないため、 xvfb (X 仮想フレーム バッファ) を設定して、レンダリングに使用できる仮想ディスプレイを Electron に提供する必要があります。このプラグインは、必要に応じてxvfbにすでにセットアップされているため、インストールするだけで済みます。

以下を.travis.ymlに追加します。

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

他の CI システムでは追加の構成が必要になる場合もあります。

問題？

このプラグインは広範囲にテストされていません。私はこれを 1 つの Vue.js CLI プロジェクトで使用していますが、非常にうまく機能します。何か問題がある場合は、問題を作成してください。何がで​​きるかを確認します。