Repository files navigation

Development and Hot Module Reload Middleware forKoa2, in a singlemiddleware module.

This module wraps and composeswebpack-dev-middleware andwebpack-hot-clientinto a single middleware module, allowing for quick and concise implementation.

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

Using npm:

npm install koa-webpack --save-dev

koa-webpack is an evergreen module. 🌲 This module requires anActive LTS Node version (v8.0.0+ or v10.0.0+), and Webpack v4.0.0+.

constKoa=require('koa');constkoaWebpack=require('koa-webpack');constapp=newKoa();constoptions={..};constmiddleware=awaitkoaWebpack(options);app.use(middleware);

Returns aPromise which resolves the servermiddleware containing thefollowing additional properties:

• close(callback)(Function) - Closes both the instance ofwebpack-dev-middlewareandwebpack-hot-client. Accepts a singleFunction callback parameter that isexecuted when complete.
• hotClient(Object) - An instance ofwebpack-hot-client.
• devMiddleware(Object) - An instance ofwebpack-dev-middleware

The middleware accepts anoptions Object, which can contain options for thewebpack-dev-middleware andwebpack-hot-client bundled with this module.The following is a property reference for the Object:

Type:Object
optional

Should you rather that the middleware use an instance ofwebpack that you'vealready init'd [with webpack config], you can pass it to the middleware usingthis option.

Example:

constwebpack=require('webpack');constconfig=require('./webpack.config.js');constkoaWebpack=require('koa-webpack');constcompiler=webpack(config);constmiddleware=awaitkoaWebpack({ compiler});app.use(middleware);

Type:Object

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

Example:

constkoaWebpack=require('koa-webpack');constconfig=require('./webpack.config.js');constmiddleware=awaitkoaWebpack({ config});app.use(middleware);

Type:String

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

Example:

constpath=require('path');constkoaWebpack=require('koa-webpack');// The Webpack config file would be at "./client/webpack.config.js".constmiddleware=awaitkoaWebpack({configPath:path.join(__dirname,'client','webpack.config.js')});app.use(middleware);

Type:Object

ThedevMiddleware property should contain options forwebpack-dev-middleware, a list ofwhich is available atwebpack-dev-middleware.Omitting this property will result inwebpack-dev-middleware using its defaultoptions.

Type:Object|Boolean

ThehotClient property should contain options forwebpack-hot-client, a list ofwhich is available atwebpack-hot-client.Omitting this property will result inwebpack-hot-client using its defaultoptions.

As ofv3.0.1 setting this tofalse will completely disablewebpack-hot-clientand all automatic Hot Module Replacement functionality.

When usingkoa-webpack withkoa-compress,you may experience issues with saving files and hot module reload. Please reviewthis issuefor more information and a workaround.

WhenserverSideRender is set to true inconfig.devMiddleware,webpackStats isaccessible fromctx.state.webpackStats.

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

For more details please refer to:webpack-dev-middleware

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

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

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

This module started as a fork ofkoa-webpack-middleware