koa-webpack-middleware

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

• webpack plugins configure

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

• 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']
  },
  

• 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'
  }
  

• 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!