Awesome
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
configureplugins: [ 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!