webpack-dev-middleware for koa2 with HMR(hot module replacement) supports.

$ npm i koa-webpack-middleware -D

This middleware designd for koa2 ecosystem, make sure installed the right version:

npm i koa@next -S

See example/ for an example of usage.

import webpack from 'webpack' import { devMiddleware, hotMiddleware } from 'koa-webpack-middleware' import devConfig from './webpack.config.dev' const compile = webpack(devConfig) app.use(devMiddleware(compile, { // display no info to console (only warnings and errors) noInfo: false, // display nothing to the console quiet: false, // switch into lazy mode // that means no watching, but recompilation on every request lazy: true, // watch options (only lazy: false) watchOptions: { aggregateTimeout: 300, poll: true }, // public path to bind the middleware to // use the same as in webpack publicPath: "/assets/", // custom headers headers: { "X-Custom-Header": "yes" }, // options for formating the statistics stats: { colors: true } })) app.use(hotMiddleware(compile, { // log: console.log, // path: '/__webpack_hmr', // heartbeat: 10 * 1000 }))

1. webpack plugins configure

   plugins: [ new webpack.optimize.OccurrenceOrderPlugin(), new webpack.HotModuleReplacementPlugin(), new webpack.NoErrorsPlugin() ]

2. webpack entry configure

   $ npm i eventsource-polyfill -D

   entry: { 'index': [ // For old browsers 'eventsource-polyfill', 'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000', 'index.js'] },

3. webpack loader configure

   $ npm i babel-preset-es2015 babel-preset-stage-0 -D

   { test: /\.js$/, loader: 'babel', query: { 'presets': ['es2015', 'stage-0'] } }, include: './src' }

   HMR for react project

   $ npm i babel-preset-react babel-preset-react-hmre -D

   { test: /\.jsx?$/, loader: 'babel', query: { 'presets': ['es2015', 'stage-0', 'react'], 'env': { 'development': { 'presets': ['react-hmre'] } } }, include: './src' }

4. put the code in your entry file to enable HMR

   React project do not need

   if (module.hot) { module.hot.accept() }

That's all, you're all set!