koa服务端热更新问题

Question

问题
webpack的入口文件./build/test/src/entry/index
引入css文件 修改后热更新正常
但是只要修改的是js代码， webpack就会不断的打包，最后才更新到浏览器，过程将近10s，

网上的很多例子都是express
服务端用的是koa
热更新插件是koa-webpack-dev-middleware，koa-webpack-hot-middleware

webpack的配置

const webpack = require('webpack');
const path = require('path');
var publicPath = 'http://192.168.1.100:1919/dist/';
var hotMiddlewareScript = 'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000&reload=true';
module.exports = {
    entry: {
        index: [
            hotMiddlewareScript, 
            './build/test/src/entry/index'
        ]
    },
    output:{
        filename: 'bundle.[name].js',
        path: path.resolve(__dirname, "./build/test/src"),
        publicPath: publicPath
    },
    module: {
        loaders: [
            {
                test: /.css$/,
                loader: 'style-loader!css-loader'
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                query: {
                    'presets': ['es2015', 'stage-0']
                }
            }
        ]
    },
    plugins: [
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin()
    ]
}

项目目录

app.js 服务端

const webpack = require('webpack');
const webpackDevMiddleware = require('koa-webpack-dev-middleware');
const webpackHotMiddleware = require('koa-webpack-hot-middleware');
const config = require('./webpack.config');
const koa =  require('koa');
const app = new koa();
const convert = require('koa-convert');
const router = require('./server/router/router');
const koaStatic = require('koa-static');
const views = require('co-views');
const compiler = webpack(config);
app.use(webpackDevMiddleware(compiler, {
    noInfo: true,
    watchOptions: {
        ignored: /node_modules/,
    },
    reload: true,
    publicPath: config.output.publicPath,
    stats: {
        colors: true
    }
}))
app.use(webpackHotMiddleware(compiler))
app.use(async function(ctx,next) {
    ctx.render = views(__dirname + '/server', {
        ext: 'ejs',
    });
    await next();
})
    .use(koaStatic(__dirname + '/release'))
    .use(router.routes())
    .use(router.allowedMethods())
app.listen(1919)

package.json

{
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "co-views": "^2.1.0",
    "css-loader": "^0.28.8",
    "ejs": "^2.5.7",
    "eventsource-polyfill": "^0.9.6",
    "express-to-koa": "^1.0.6",
    "koa": "^2.4.1",
    "koa-convert": "^1.2.0",
    "koa-router": "^7.3.0",
    "koa-static": "^4.0.2",
    "koa-webpack-dev-middleware": "^2.0.2",
    "koa-webpack-hot-middleware": "^1.0.3",
    "koa-webpack-middleware": "^1.0.7",
    "style-loader": "^0.19.1",
    "webpack": "^3.3.0",
    "webpack-dev-middleware": "^1.12.0",
    "webpack-hot-middleware": "^2.18.2"
  },
  "dependencies": {
    "koa": "^2.0.0-alpha.8"
  }
}

Answer 1

自写的一篇基于koa+webpack简易教程，可以去看下，觉的有用的话，别忘了留个Star哦~

Answer 2

你的package.json启动命令部分呢，需要什么参数？？？？光贴个依赖有什么用