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 專案中使用它，並且運行得很好。如果您遇到任何問題，請建立一個問題，我會看看我能做些什麼。