Repository files navigation

webpack-dev-middleware forkoa2 withHMR(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

Seeexample/ for an example of usage.

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

1. webpackplugins configure

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

2. webpackentry 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. webpackloader 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!