koa-webpack-server

v0.2.4

Published

4 years ago

koa2 webpack hmr development server

0High
0Medium
0Low

kimjuny

koa webpack universal isomorphic react vue

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 exported 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

Noted: This package is still on early stage.

Install

yarn add koa-webpack-server --dev

Usage

server.js

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

// 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 = `
    <!doctype html>
    <html>
      <head><title>koa-webpack-server</title></head>
      <body><div>Hello World.</div></body>
    </html>
  `;
  await next();
}

export render;

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.use(async (ctx, next) => {
  const assetsByChunkName = ctx.state.webpackStats.toJson().assetsByChunkName;
  // do something with assetsByChunkName
})

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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme