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'
}