Koa Webpack Server
koa2、webpack、hmr、isomorphic、server-side-render
Koa-Webpack-Server is all-in-one environment for koa2 and webpack2/3 development.
- Autowire your koa2 app with webpack-dev-middleware.
- Autowire your koa2 app with webpack-hot-middleware.
- Autowire your koa2 app with middlewares which are
export
ed from theentry
file in your webpack server side config. - HMR for client side and server side code, which means you'll never need to restart your node server or refresh your browser to see the changes.
This package is usually used to build a universal/isomorphic SPA applications(React、Vue、Angular) using koa and webpack as setback, making universal/isomorphic web-app development super easy.
For complete examples please refer to:
Noted: This package is still on early stage.
Install
yarn add koa-webpack-server --dev
Usage
server.js
const Koa = ;const webpack = ;const webpackServer = ;const configs = ;// 👆 array of webpack configurations(client and server) const app = ; const options = compilers: dev: noInfo: false quiet: false serverSideRender: true ; // wire webpack-dev-middleware、webpack-hot-middleware to app and start webpack-hot-server;
middlewares.js
// all middlewares are 'AsyncFunction'sconst logger = async { const start = ; await ; const ms = - start; ctx; console;} ; // you may try making any changes in middlewares, for example,// change 'Hello World.' to 'Hello World!' and see what's happening.const render = async { ctxbody = ` <!doctype html> <html> <head><title>koa-webpack-server</title></head> <body><div>Hello World.</div></body> </html> `; await ;} ;
For usage detail please refer to basic examples.
API
1. webpackServer: {Function(app: Koa, options: Object):Promise}
options: Object
const options = compilers: Object // [Required] webpack compiler serverName: String // webpack server config name, default 'server' dev: Object // webpack-dev-middleware options hot: Object // webpack-hot-middleware options server: Object // hot server options
dev: Object
webpack-dev-middleware options.
When serverSideRender
is set to true
, webpackStats is accessible from ctx.state.webpackStats
.
app
For more information please refer to: server-side-rendering.
hot: Object
webpack-hot-middleware options.
server: Object
const server = use: Boolean // use hot development middleware? default is true
2. findCompiler: {Function(compiler: Compiler || MultiCompiler, name: String): Compiler}
3. findStats: {Function(stats: Stats || MultiStats, name: String): Stats}
License
MIT