问题 Webpack HMR永远不会更新页面

我一直在搞乱Webpack的不同功能，我正在慢慢理解事物。

典型的控制台输出：

[WDS] App updated. Recompiling...
[WDS] App hot update...
[HMR] Checking for updates on the server...
[HMR] The following modules couldn't be hot updated: (They would need a full reload!)
[HMR]  - 14
[HMR] Nothing hot updated.
[HMR] App is up to date.

无论代码更新，JS，Stylus，模板等等都会发生这种情况。一切都经过转换（Babel，Stylus，Handlebars），但这无关紧要。

如果有人想要查看完整的源代码，我有一个GitHub项目： https://github.com/SimenB/webpack-fun。 npm install && npm start 运行它。

的WebPack-配置：

'use strict';

var webpack = require('webpack');
var path = require('path');

var ExtractTextPlugin = require('extract-text-webpack-plugin');
var autoprefixer = require('autoprefixer-core');

module.exports = {
  context: path.resolve('./src'),
  output: {
    filename: 'kj-[hash].js'
  },
  recordsOutputPath: path.resolve('./records.json'),
  resolve: {
    alias: {
      'common-assets': path.resolve('src', 'common'),
      noop: path.resolve('src', 'common', 'scripts', 'noop')
    }
  },
  module: {
    loaders: [
      { test: /\.json$/, loader: 'json' },
      { test: /\.js$/, exclude: /node_modules/, loader: 'babel?optional=runtime' },
      { test: /\.styl$/, loader: ExtractTextPlugin.extract('style', 'css!postcss!stylus') },
      { test: /\.hbs$/, loader: 'handlebars', query: { inlineRequires: '\/images\/' } },
      { test: /\.png$/, loader: 'url?prefix=img/&limit=5000' },
      { test: /\.jpg$/, loader: 'url?prefix=img/&limit=5000' },
      { test: /\.woff(2)?$/, loader: 'url?prefix=font/&limit=5000' },
      { test: /\.eot$/, loader: 'file?prefix=font/' },
      { test: /\.ttf$/, loader: 'file?prefix=font/' },
      { test: /\.svg$/, loader: 'file?prefix=font/' }
    ]
  },
  plugins: [
    new ExtractTextPlugin('kj-[contenthash].css'),
    new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 20 })
  ],
  postcss: [ autoprefixer({ browsers: [ 'Chrome >= 33', 'IE >= 8' ] }) ]
};

Gulp任务

function devServer (project) {
  var webpackConfig = require(path.resolve(CONFIG_FILENAME));
  var webpackCore = webpack.core;

  var webpackOptions = {
    output: {
      path: path.resolve('src', project, 'build')
    },
    debug: true,
    devtool: '#source-map',
    watchDelay: 200,
    entry: [
      'webpack-dev-server/client?http://0.0.0.0:8080',
      'webpack/hot/only-dev-server',
      './' + project + '/scripts/index.js'
    ],
    resolve: {
      alias: {
        'dev-module': 'common-assets/scripts/noop'
      }
    }
  };

  webpackConfig.plugins.push(new webpackCore.HotModuleReplacementPlugin());
  webpackConfig.plugins.push(new webpackCore.NoErrorsPlugin());
  webpackConfig.plugins.push(new HtmlWebpackPlugin({ template: 'src/common/index.html', title: 'KJ' }));

  // Start a webpack-dev-server
  var options = merge(webpackConfig, webpackOptions);

  var compiler = webpackCore(options);

  new WebpackDevServer(compiler, {
    contentBase: webpackOptions.output.path,
    hot: true,
    inline: true,
    proxy: {
      '*': 'http://localhost:7021/' + project + '-webapp'
    }
  }).listen(8080, 'localhost', function (err) {
      if (err) {
        throw new gutil.PluginError('webpack-dev-server', err);
      }
      // Server listening
      gutil.log('[webpack-dev-server]', 'http://localhost:8080/webpack-dev-server/');
    });
}

gulp.task('webpack-dev-server:hpp', function () {
  devServer('hpp');
});