https://github.com/kimjuny/koa-webpack-server
Koa2 webpack all-in-one environment for universal development
https://github.com/kimjuny/koa-webpack-server
hmr hot isomorphic koa-middleware koa2 universal webpack webpack-dev-middleware webpack-hot-middleware
Last synced: 6 months ago
JSON representation
Koa2 webpack all-in-one environment for universal development
- Host: GitHub
- URL: https://github.com/kimjuny/koa-webpack-server
- Owner: kimjuny
- License: mit
- Created: 2017-08-14T09:42:13.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2020-04-21T16:47:23.000Z (over 5 years ago)
- Last Synced: 2024-04-25T20:46:29.185Z (over 1 year ago)
- Topics: hmr, hot, isomorphic, koa-middleware, koa2, universal, webpack, webpack-dev-middleware, webpack-hot-middleware
- Language: JavaScript
- Homepage: https://kimjuny.github.io/koa-webpack-server/
- Size: 2.73 MB
- Stars: 14
- Watchers: 2
- Forks: 1
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Koa Webpack Server
[](https://greenkeeper.io/)
[](https://travis-ci.org/kimjuny/koa-webpack-server)
[](https://www.npmjs.com/package/koa-webpack-server)
[](https://codeclimate.com/github/kimjuny/koa-webpack-server)
[](https://codeclimate.com/github/kimjuny/koa-webpack-server/coverage)
> 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](https://github.com/webpack/webpack-dev-middleware).
* Autowire your koa2 app with [webpack-hot-middleware](https://github.com/glenjamin/webpack-hot-middleware).
* Autowire your koa2 app with middlewares which are `export`ed from the `entry` 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:
* [koa-react-universal](https://github.com/kimjuny/koa-react-universal)
> Noted: This package is still on early stage.
## Install
```
yarn add koa-webpack-server --dev
```
## Usage
server.js
```javascript
const Koa = require('koa');
const webpack = require('webpack');
const { webpackServer } = require('koa-webpack-server');
const configs = require('../config/webpack.dev.config');
// 👆 array of webpack configurations(client and server)
const app = new Koa();
const options = {
compilers: webpack(configs),
dev: {
noInfo: false,
quiet: false,
serverSideRender: true,
},
};
// wire webpack-dev-middleware、webpack-hot-middleware to app and start webpack-hot-server
webpackServer(app, options).then(({ middlewares }) => {
// hot-middlewares: you may try making any changes from middlewares,
// it will automatically rebuild and reload,
// so that you don't have to reboot your server to see the changes.
const { logger, render } = middlewares;
app.use(logger);
app.use(render);
app.listen(3000, () => {
console.log('server started at port 3000');
});
}).catch((err) => {
});
```
middlewares.js
```javascript
// all middlewares are 'AsyncFunction's
const logger = async (ctx, next) => {
const start = new Date();
await next();
const ms = new Date() - start;
ctx.set('X-Response-Time', `${ms}ms`);
console.log(`[${ctx.method}][${ms}ms] ${ctx.url}`);
}
export logger;
// you may try making any changes in middlewares, for example,
// change 'Hello World.' to 'Hello World!' and see what's happening.
const render = async (ctx, next) => {
ctx.body = `
koa-webpack-server
Hello World.
`;
await next();
}
export render;
```
For usage detail please refer to [basic examples](https://github.com/kimjuny/koa-webpack-server/tree/master/examples).
## API
### 1. webpackServer: {Function(app: Koa, options: Object):Promise}
#### options: Object
```javascript
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](https://github.com/webpack/webpack-dev-middleware) options.
When `serverSideRender` is set to `true`, webpackStats is accessible from `ctx.state.webpackStats`.
```javascript
app.use(async (ctx, next) => {
const assetsByChunkName = ctx.state.webpackStats.toJson().assetsByChunkName;
// do something with assetsByChunkName
})
```
For more information please refer to: [server-side-rendering](https://github.com/webpack/webpack-dev-middleware#server-side-rendering).
#### hot: Object
[webpack-hot-middleware](https://github.com/glenjamin/webpack-hot-middleware) options.
#### server: Object
```javascript
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
## Contributing