{"id":14989585,"url":"https://github.com/kimjuny/koa-webpack-server","last_synced_at":"2025-04-12T01:21:41.350Z","repository":{"id":87819572,"uuid":"100252049","full_name":"kimjuny/koa-webpack-server","owner":"kimjuny","description":"Koa2 webpack all-in-one environment for universal development","archived":false,"fork":false,"pushed_at":"2020-04-21T16:47:23.000Z","size":2859,"stargazers_count":14,"open_issues_count":7,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-25T20:46:29.185Z","etag":null,"topics":["hmr","hot","isomorphic","koa-middleware","koa2","universal","webpack","webpack-dev-middleware","webpack-hot-middleware"],"latest_commit_sha":null,"homepage":"https://kimjuny.github.io/koa-webpack-server/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kimjuny.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-08-14T09:42:13.000Z","updated_at":"2021-01-22T09:27:27.000Z","dependencies_parsed_at":null,"dependency_job_id":"a378c59f-0539-419e-9b85-378f8cd2651e","html_url":"https://github.com/kimjuny/koa-webpack-server","commit_stats":{"total_commits":31,"total_committers":2,"mean_commits":15.5,"dds":"0.12903225806451613","last_synced_commit":"3ea004ee04f3f27995f3e8ab7a6b391fab0ff562"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kimjuny%2Fkoa-webpack-server","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kimjuny%2Fkoa-webpack-server/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kimjuny%2Fkoa-webpack-server/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kimjuny%2Fkoa-webpack-server/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kimjuny","download_url":"https://codeload.github.com/kimjuny/koa-webpack-server/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248501863,"owners_count":21114685,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hmr","hot","isomorphic","koa-middleware","koa2","universal","webpack","webpack-dev-middleware","webpack-hot-middleware"],"created_at":"2024-09-24T14:18:36.585Z","updated_at":"2025-04-12T01:21:41.326Z","avatar_url":"https://github.com/kimjuny.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Koa Webpack Server\n\n[![Greenkeeper badge](https://badges.greenkeeper.io/kimjuny/koa-webpack-server.svg)](https://greenkeeper.io/)\n[![Build Status](https://travis-ci.org/kimjuny/koa-webpack-server.svg?branch=master)](https://travis-ci.org/kimjuny/koa-webpack-server)\n[![Downloads](https://img.shields.io/npm/dt/koa-webpack-server.svg)](https://www.npmjs.com/package/koa-webpack-server)\n[![Code Climate](https://codeclimate.com/github/kimjuny/koa-webpack-server/badges/gpa.svg)](https://codeclimate.com/github/kimjuny/koa-webpack-server)\n[![Test Coverage](https://codeclimate.com/github/kimjuny/koa-webpack-server/badges/coverage.svg)](https://codeclimate.com/github/kimjuny/koa-webpack-server/coverage)\n\n\n\u003e koa2、webpack、hmr、isomorphic、server-side-render\n\nKoa-Webpack-Server is all-in-one environment for koa2 and webpack2/3 development. \n\n* Autowire your koa2 app with [webpack-dev-middleware](https://github.com/webpack/webpack-dev-middleware).\n* Autowire your koa2 app with [webpack-hot-middleware](https://github.com/glenjamin/webpack-hot-middleware).\n* Autowire your koa2 app with middlewares which are `export`ed from the `entry` file in your webpack server side config.\n* 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.\n\nThis 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.\n\nFor complete examples please refer to:\n\n* [koa-react-universal](https://github.com/kimjuny/koa-react-universal)\n\n\u003e Noted: This package is still on early stage.\n\n## Install\n\n```\nyarn add koa-webpack-server --dev\n```\n\n## Usage\n\nserver.js\n\n```javascript\nconst Koa = require('koa');\nconst webpack = require('webpack');\nconst { webpackServer } = require('koa-webpack-server');\nconst configs = require('../config/webpack.dev.config');\n// 👆 array of webpack configurations(client and server)\n\nconst app = new Koa();\n\nconst options = {\n  compilers: webpack(configs),\n  dev: {\n    noInfo: false,\n    quiet: false,\n    serverSideRender: true,\n  },\n};\n\n// wire webpack-dev-middleware、webpack-hot-middleware to app and start webpack-hot-server\nwebpackServer(app, options).then(({ middlewares }) =\u003e {\n  // hot-middlewares: you may try making any changes from middlewares,\n  // it will automatically rebuild and reload,\n  // so that you don't have to reboot your server to see the changes.\n  const { logger, render } = middlewares;\n\n  app.use(logger);\n  app.use(render);\n\n  app.listen(3000, () =\u003e {\n    console.log('server started at port 3000');\n  });\n}).catch((err) =\u003e {\n});\n```\n\nmiddlewares.js\n\n```javascript\n// all middlewares are 'AsyncFunction's\nconst logger = async (ctx, next) =\u003e {\n  const start = new Date();\n  await next();\n  const ms = new Date() - start;\n  ctx.set('X-Response-Time', `${ms}ms`);\n  console.log(`[${ctx.method}][${ms}ms] ${ctx.url}`);\n}\n\nexport logger;\n\n// you may try making any changes in middlewares, for example,\n// change 'Hello World.' to 'Hello World!' and see what's happening.\nconst render = async (ctx, next) =\u003e {\n  ctx.body = `\n    \u003c!doctype html\u003e\n    \u003chtml\u003e\n      \u003chead\u003e\u003ctitle\u003ekoa-webpack-server\u003c/title\u003e\u003c/head\u003e\n      \u003cbody\u003e\u003cdiv\u003eHello World.\u003c/div\u003e\u003c/body\u003e\n    \u003c/html\u003e\n  `;\n  await next();\n}\n\nexport render;\n\n```\n\nFor usage detail please refer to [basic examples](https://github.com/kimjuny/koa-webpack-server/tree/master/examples).\n\n## API\n\n### 1. webpackServer: {Function(app: Koa, options: Object):Promise}\n\n#### options: Object\n\n```javascript\nconst options = {\n  compilers: Object,  // [Required] webpack compiler\n  serverName: String, // webpack server config name, default 'server'\n  dev: Object,        // webpack-dev-middleware options\n  hot: Object,        // webpack-hot-middleware options\n  server: Object,     // hot server options\n}\n```\n\n#### dev: Object\n\n[webpack-dev-middleware](https://github.com/webpack/webpack-dev-middleware) options.\n\nWhen `serverSideRender` is set to `true`, webpackStats is accessible from `ctx.state.webpackStats`.\n\n```javascript\napp.use(async (ctx, next) =\u003e {\n  const assetsByChunkName = ctx.state.webpackStats.toJson().assetsByChunkName;\n  // do something with assetsByChunkName\n})\n```\n\nFor more information please refer to: [server-side-rendering](https://github.com/webpack/webpack-dev-middleware#server-side-rendering).\n\n#### hot: Object\n\n[webpack-hot-middleware](https://github.com/glenjamin/webpack-hot-middleware) options.\n\n#### server: Object\n\n```javascript\nconst server = {\n  use: Boolean,      // use hot development middleware? default is true\n}\n```\n\n### 2. findCompiler: {Function(compiler: Compiler || MultiCompiler, name: String): Compiler}\n\n### 3. findStats: {Function(stats: Stats || MultiStats, name: String): Stats}\n\n## License\n\nMIT\n\n## Contributing\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkimjuny%2Fkoa-webpack-server","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkimjuny%2Fkoa-webpack-server","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkimjuny%2Fkoa-webpack-server/lists"}