koa-webpack-middleware

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

Install

$ npm i kwm -D

Exmaple

$ npm i
$ npm run dev

change example/react/src/components/Layout.js #render() && save!

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 kwm from 'kwm'
import devConfig from './webpack.config.dev'
const compile = webpack(devConfig)

// kwm(compile, devConf, hotConf) 
app.use(kwm(compile)

app.use( (ctx, next ) => {
    if (ctx.path === '/'){
        const jsx = ( <Layout /> );
        const reactDom = renderToString( jsx );
        ctx.styles = ctx.entry('app').styles
        ctx.scripts = ctx.entry('app').scripts
        ctx.type = 'html';
        ctx.body = htmlTemplate( ctx, reactDom ) ;
    }
} );

• ctx.webpackStats = ctx.state.webpackStats
• ctx.webpackFs = ctx.state.fs
• ctx.entry('webpack_entry_key') return {styles, scripts}

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 output configure

   output: {
       path: path.resolve( __dirname, "dist" ),
       // filename: "[name].bundle.js",
       filename: '[name].[hash].js'
   },

That's all, you're all set!