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