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 |
安装
$ 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 属性
介绍几个我觉得常用的，其余的可以在里查看
Type: Object
Default: {}
用于设置webpack的配置信息
const serve = require('webpack-serve');const config = require('./webpack.config.js');serve({config}); 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(); }}); 附加功能配置
上面的content里有简单的使用介绍
回调参数：
- app 底层的koa应用实例
- middleware 通过Accessor functions(访问函数)调用webpack-dev-middleware和koa-static middleware的对象。
- options webpack的配置
还有很多功能可以添加进去
- //
- compress
- historyApiFallback
- proxy + history fallback
- proxy + router
- reuse Chrome tab
- staticOptions
- useLocalIp
- watch content
具体可以看和
对于单页应用来说，historyApiFallback 是很有必要的一个功能，主要是用于刷新页面后路由重定向，
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'}