orlowang / koa-webpack-middleware

webpack dev&hot middleware for koa2

koa-webpack-middleware

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

Install

$ npm i koa-webpack-middleware -D

Depends

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

npm i koa@next -S

Usage

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
}))

HMR configure

1. webpack plugins configure

   plugins: [
       new webpack.optimize.OccurenceOrderPlugin(),
       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!