Development and Hot Module Reload Middleware for Koa2, in a single middleware module.
This module wraps and composes webpack-dev-middleware
and webpack-hot-middleware
into a single middleware module, allowing for quick and concise implementation.
As an added bonus, it'll also use the install 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
.
This module is a fork of koa-webpack-middleware, as the afore mentioned project has fallen into a state of neglect, and contains many enhancements and updates.
First thing's first, install the module:
npm install koa-webpack --save-dev
If you happen to see warning from npm that reads:
UNMET PEER DEPENDENCY [email protected]
fear not, simply install the latest
beta version of webpack
.
Next, setup the module in your code. (We're assuming ES6 syntax here)
import Koa from 'koa';
import middleware from 'koa-webpack';
const app = new Koa();
app.use(middleware({
// options
}))
The middleware accepts an options
Object, which can contain options for the
webpack-dev-middleware
and webpack-hot-middleware
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 of webpack
that you've
already init'd [with webpack config], you can pass it to the middleware using
this option.
Example:
import Webpack from 'webpack';
import config from './webpack.config.js';
const compiler = Webpack(config);
app.use(middleware({
compiler: compiler;
}))
Type: Object
optional
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:
import config from './webpack.config.js';
app.use(middleware({
config: config;
}))
Type: Object
optional
The dev
property should contain options for webpack-dev-middleware
, a list of
which is available at webpack-dev-middleware.
Omitting this property will result in webpack-dev-middleware
using its default
options.
Type: Object
optional
The dev
property should contain options for webpack-hot-middleware
, a list of
which is available at webpack-hot-middleware.
Omitting this property will result in webpack-hot-middleware
using its default
options.
npm install
npm install gulp -g
gulp build
The dist
directory will contain the index.js
file that the module uses as the entry point.
We welcome your contributions! Please have a read of CONTRIBUTING.