JavaScript
Switch branches/tags
Nothing to show
Clone or download
Latest commit 8ab1200 Aug 12, 2017
Permalink
Failed to load latest commit information.
example preview version Apr 3, 2016
middleware Add webpackDevMiddleware instance utils Jul 5, 2017
.babelrc change build Apr 3, 2016
.gitignore bump version 1.0.2 Nov 7, 2016
.npmignore preview version Apr 3, 2016
.npmrc CI -> publish Apr 3, 2016
README.md fix READEME.md bug Feb 9, 2017
circle.yml switch to yarn in ci May 3, 2017
package-lock.json update deps Aug 12, 2017
package.json bump Aug 12, 2017
yarn.lock fixes build May 20, 2017

README.md

koa-webpack-middleware

npm version Circle CI js-standard-style

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!