# koa-webpack

> Development and Hot Reload Middleware for Koa2

Latest version **6.0.0** (published 2020-08-19) · MPL-2.0 license · 0 weekly downloads

## Install

```sh
npm install koa-webpack
pnpm add koa-webpack
yarn add koa-webpack
bun add koa-webpack
```

## Health

**Score 23/100 (F)** — status: abandoned.

Positive: has types package; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 6.0.0 |
| Published | 2020-08-19 |
| First published | 2016-10-20 |
| Weekly downloads | 0 |
| License | MPL-2.0 |
| TypeScript types | separate (@types/koa-webpack) |
| Module format | CommonJS |
| Node | >= 10.0.0 |
| Dependencies | 6 |
| Unpacked size | 29.4 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 440 |
| Author | Andrew Powell |
| Maintainers | shellscape |
| Keywords | koa, middleware, webpack |

## Links

- npm: https://www.npmjs.com/package/koa-webpack
- Repository: https://github.com/shellscape/koa-webpack
- Issues: https://github.com/shellscape/koa-webpack/issues
- npm.io page: https://npm.io/package/koa-webpack

## Dependencies (6)

- [joi](https://npm.io/package/joi.md) ^17.2.0
- [chalk](https://npm.io/package/chalk.md) ^4.1.0
- [app-root-path](https://npm.io/package/app-root-path.md) ^3.0.0
- [merge-options](https://npm.io/package/merge-options.md) ^2.0.0
- [webpack-hot-client](https://npm.io/package/webpack-hot-client.md) ^4.1.2
- [webpack-dev-middleware](https://npm.io/package/webpack-dev-middleware.md) ^3.7.2

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 6.0.0 (latest) — 2020-08-19
- 5.1.0-beta.1 (beta) — 2018-07-06
- 0.1.7-test2 (test) — 2016-10-28
- 5.3.0 — 2020-01-28
- 5.2.5 — 2020-01-21
- 5.2.4 — 2019-07-15
- 5.2.3 — 2019-05-04
- 5.2.2 — 2019-03-08
- 5.2.1 — 2019-01-08
- 5.2.0 — 2019-01-08
- 5.1.1 — 2018-11-04
- 5.1.0 — 2018-07-09
- 5.0.2 — 2018-06-03
- 5.0.1 — 2018-06-02
- 5.0.0 — 2018-06-02
- … 27 more at https://npm.io/package/koa-webpack/versions

## README

[tests]: 	https://img.shields.io/circleci/project/github/shellscape/koa-webpack.svg
[tests-url]: https://circleci.com/gh/shellscape/koa-webpack

[cover]: https://codecov.io/gh/shellscape/koa-webpack/branch/master/graph/badge.svg
[cover-url]: https://codecov.io/gh/shellscape/koa-webpack

[size]: https://packagephobia.now.sh/badge?p=koa-webpack
[size-url]: https://packagephobia.now.sh/result?p=koa-webpack

# koa-webpack

[![tests][tests]][tests-url]
[![cover][cover]][cover-url]
[![size][size]][size-url]

Development and Hot Module Reload Middleware for **Koa2**, in a single
middleware module.

This module wraps and composes
[`webpack-dev-middleware`](https://github.com/webpack/webpack-dev-middleware) and
[`webpack-hot-client`](https://github.com/shellscape/webpack-hot-client)
into a single middleware module, allowing for quick and concise implementation.

As an added bonus, it'll also use the installed `webpack` module from your project,
and the `webpack.config.js` file in the root of your project, automagically, should
you choose to let it. This negates the need for all of the repetitive setup and
config that you get with `koa-webpack-middleware`.

## Install

Using npm:

```console
npm install koa-webpack --save-dev
```

<a href="https://www.patreon.com/shellscape">
  <img src="https://c5.patreon.com/external/logo/become_a_patron_button@2x.png" width="160">
</a>

## Requirements

`koa-webpack` is an evergreen module. 🌲 This module requires an [Active LTS](https://github.com/nodejs/Release) Node version (v8.0.0+ or v10.0.0+), and Webpack v4.0.0+.

## Usage

```js
const Koa = require('koa');
const koaWebpack = require('koa-webpack');

const app = new Koa();
const options = { .. };
const middleware = await koaWebpack(options);

app.use(middleware);
```

## API

### koaWebpack([options])

Returns a `Promise` which resolves the server `middleware` containing the
following additional properties:

- `close(callback)` *(Function)* - Closes both the instance of `webpack-dev-middleware`
and `webpack-hot-client`. Accepts a single `Function` callback parameter that is
executed when complete.
- `hotClient` *(Object)* - An instance of `webpack-hot-client`.
- `devMiddleware` *(Object)* - An instance of `webpack-dev-middleware`

## Options

The middleware accepts an `options` Object, which can contain options for the
`webpack-dev-middleware` and `webpack-hot-client` bundled with this module.
The following is a property reference for the Object:

### compiler

Type: `Object`  
`optional`

Should you rather that the middleware use an instance of `webpack` that you've
already init'd [with webpack config], you can pass it to the middleware using
this option.

Example:

```js
const webpack = require('webpack');
const config = require('./webpack.config.js');
const koaWebpack = require('koa-webpack');

const compiler = webpack(config);
const middleware = await koaWebpack({ compiler });

app.use(middleware);
```

### config

Type: `Object`

Should you rather that the middleware use an instance of webpack configuration
that you've already required/imported, you can pass it to the middleware using
this option.

Example:

```js
const koaWebpack = require('koa-webpack');
const config = require('./webpack.config.js');

const middleware = await koaWebpack({ config });

app.use(middleware);
```

### configPath

Type: `String`

Allows you to specify the absolute path to the Webpack config file to be used.

Example:

```js
const path = require('path');
const koaWebpack = require('koa-webpack');

// The Webpack config file would be at "./client/webpack.config.js".
const middleware = await koaWebpack({
  configPath: path.join(__dirname, 'client', 'webpack.config.js')
});

app.use(middleware);
```

### devMiddleware

Type: `Object`

The `devMiddleware` property should contain options for `webpack-dev-middleware`, a list of
which is available at [webpack-dev-middleware](https://github.com/webpack/webpack-dev-middleware).
Omitting this property will result in `webpack-dev-middleware` using its default
options.

### hotClient

Type: `Object|Boolean`

The `hotClient` property should contain options for `webpack-hot-client`, a list of
which is available at [webpack-hot-client](https://github.com/webpack-contrib/webpack-hot-client).
Omitting this property will result in `webpack-hot-client` using its default
options.

As of `v3.0.1` setting this to `false` will completely disable `webpack-hot-client`
and all automatic Hot Module Replacement functionality.

## Using with koa-compress

When using `koa-webpack` with [koa-compress](https://github.com/koajs/compress),
you may experience issues with saving files and hot module reload. Please review
[this issue](https://github.com/shellscape/koa-webpack/issues/36#issuecomment-289565573)
for more information and a workaround.

## Server-Side-Rendering

When `serverSideRender` is set to true in `config.devMiddleware`, `webpackStats` is
accessible from `ctx.state.webpackStats`.

```js
app.use(async (ctx, next) => {
  const assetsByChunkName = ctx.state.webpackStats.toJson().assetsByChunkName;
  // do something with assetsByChunkName
})
```

For more details please refer to:
[webpack-dev-middleware](https://github.com/webpack/webpack-dev-middleware#server-side-rendering)


## Using with html-webpack-plugin

When using with html-webpack-plugin, you can access dev-middleware in-memory filesystem to serve index.html file:

```js
const middleware = await koaWebpack({ config });

app.use(middleware);

app.use(async (ctx) => {
  const filename = path.resolve(webpackConfig.output.path, 'index.html')
  ctx.response.type = 'html'
  ctx.response.body = middleware.devMiddleware.fileSystem.createReadStream(filename)
});
```

## Contributing

Please take a moment to read our contributing guidelines if you haven't yet done so.

#### [CONTRIBUTING](./.github/CONTRIBUTING.md)

## Attribution

This module started as a fork of
[`koa-webpack-middleware`](https://github.com/leecade/koa-webpack-middleware)

## License

#### [MPL](./LICENSE)

---
_Source: https://npm.io/package/koa-webpack · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._