webpack-serve 的使用

webpack-serve

官方已經不維護了，還請繼續食用webpack-dev-server

基本狀況

倉庫地址

配合webpack4食用最佳，在webpack3及之前的版本會有幫助信息提示

由於熱加載使用的是WebSockets，因此在老版本的瀏覽器裏用不了

和webpack-dev-server的差別

	webpack-dev-server	webpack-serve
Initial release	23 Dec 2014	12 feb 2018
Total releases	74	7
Github stars	3449	231
Lines of code	28301	16075
under the hood	Express.js (22047 lines)	Koa.js (8913 lines)
API	not aligned	API first
Mode	only maintenance	evolution
Total	work slower but supports old browsers	fast alternative

How is webpack-serve different from webpack-dev-server?

安裝

$ npm install --save-dev webpack-serve 
或 
$ yarn add -D webpack-serve

使用

在客戶端使用命令行模式：

$ webpack-serve
或
$ webpack-serve ./webpack.config.js
或
$ webpack-serve --config ./webpack.config.js

在node裏使用API模式

const serve = require('webpack-serve');
serve([option]);

webpack-serve的配置

在項目的根目錄/下：

1. package.json裏添加serve屬性
2. 建立.serverc或者.serverc.json文件，支持json或者yml的編寫格式
3. 使用commonjs規範編寫的serve.config.js文件

更經常使用的方式是在webpack的config裏添加serve屬性

關於webpack-serve API 模式 的 option 屬性

介紹幾個我以爲經常使用的，其他的能夠在官方文檔裏查看

config

Type: Object

Default: {}

用於設置webpack的配置信息

const serve = require('webpack-serve');
const config = require('./webpack.config.js');
serve({config});

content

Type: String|[String]

Default: process.cwd()

用於設置靜態資源的讀取路徑

Note: 默認狀況下，該配置下的路徑讀取優先級高於webpack的配置路徑

const serve = require('webpack-serve');
const config = require('./webpack.config.js');
serve({
    content: [__dirname],
    config
});

若是想要使用webpack的配置路徑，須要使用到add附加屬性的配置，在content以前調用webpack

serve({
    content: [__dirname],
    config
    add: (app, middleware, options) => {
        middleware.webpack();
        middleware.content();
    }
});

add

附加功能配置

上面的content裏有簡單的使用介紹

回調參數：

• app 底層的koa應用實例
• middleware 經過Accessor functions(訪問函數)調用webpack-dev-middleware和koa-static middleware的對象。
• options webpack的配置

還有不少功能能夠添加進去

• bonjour //局域網DNS多播
• compress
• historyApiFallback
• proxy + history fallback
• proxy + router
• reuse Chrome tab
• staticOptions
• useLocalIp
• watch content

具體能夠看文檔和代碼示例

對於單頁應用來講，historyApiFallback 是頗有必要的一個功能，主要是用於刷新頁面後路由重定向，
對於須要作中間層api轉發的還有端口和路由轉發的proxy模塊也是有用到的

// 由於基於koa2, 因此要把中間件用koa-connect包一層
const convert = require("koa-connect");
const history = require("connect-history-api-fallback"); // h5路由適配
serve: {
    add: (app, middleware, options) => {            
        app.use(convert(proxy('/api', { target: 'http://localhost:8000' })));
        app.use(convert(history({
            disableDotRule: true,
            verbose: true,
            htmlAcceptHeaders: ['text/html', 'application/xhtml+xml']
            // ... see: https://github.com/bripkens/connect-history-api-fallback#options
        })));
    },
    port: '3000'
}