项目作者: leecade

项目描述 :
webpack dev&hot middleware for koa2
高级语言: JavaScript
项目地址: git://github.com/leecade/koa-webpack-middleware.git
创建时间: 2016-04-03T18:17:26Z
项目社区:https://github.com/leecade/koa-webpack-middleware

开源协议:

下载


koa-webpack-middleware

npm version
Circle CI
js-standard-style

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

Install

  1. $ npm i koa-webpack-middleware -D

Depends

This middleware designd for koa2 ecosystem, make sure installed the right version:

  1. npm i koa@next -S

Usage

See example/ for an example of usage.

  1. import webpack from 'webpack'
  2. import { devMiddleware, hotMiddleware } from 'koa-webpack-middleware'
  3. import devConfig from './webpack.config.dev'
  4. const compile = webpack(devConfig)
  5. app.use(devMiddleware(compile, {
  6. // display no info to console (only warnings and errors)
  7. noInfo: false,
  8. // display nothing to the console
  9. quiet: false,
  10. // switch into lazy mode
  11. // that means no watching, but recompilation on every request
  12. lazy: true,
  13. // watch options (only lazy: false)
  14. watchOptions: {
  15. aggregateTimeout: 300,
  16. poll: true
  17. },
  18. // public path to bind the middleware to
  19. // use the same as in webpack
  20. publicPath: "/assets/",
  21. // custom headers
  22. headers: { "X-Custom-Header": "yes" },
  23. // options for formating the statistics
  24. stats: {
  25. colors: true
  26. }
  27. }))
  28. app.use(hotMiddleware(compile, {
  29. // log: console.log,
  30. // path: '/__webpack_hmr',
  31. // heartbeat: 10 * 1000
  32. }))

HMR configure

  1. webpack plugins configure

    1. plugins: [
    2. new webpack.optimize.OccurrenceOrderPlugin(),
    3. new webpack.HotModuleReplacementPlugin(),
    4. new webpack.NoErrorsPlugin()
    5. ]
  2. webpack entry configure

    1. $ npm i eventsource-polyfill -D
    1. entry: {
    2. 'index': [
    3. // For old browsers
    4. 'eventsource-polyfill',
    5. 'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000',
    6. 'index.js']
    7. },
  3. webpack loader configure

    1. $ npm i babel-preset-es2015 babel-preset-stage-0 -D
    1. {
    2. test: /\.js$/,
    3. loader: 'babel',
    4. query: {
    5. 'presets': ['es2015', 'stage-0']
    6. }
    7. },
    8. include: './src'
    9. }

    HMR for react project

    1. $ npm i babel-preset-react babel-preset-react-hmre -D
    1. {
    2. test: /\.jsx?$/,
    3. loader: 'babel',
    4. query: {
    5. 'presets': ['es2015', 'stage-0', 'react'],
    6. 'env': {
    7. 'development': {
    8. 'presets': ['react-hmre']
    9. }
    10. }
    11. },
    12. include: './src'
    13. }
  4. put the code in your entry file to enable HMR

    React project do not need

    1. if (module.hot) {
    2. module.hot.accept()
    3. }

That’s all, you’re all set!