Webpack HMR 从不更新页面

Question

我一直在研究 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');
});

Answer 1

我不是 webpack 专家，但我遇到过类似的问题。 webpack/hot/only-dev-server 运行时仅更新可热替换的模块，不会进行完全重新加载。如果您不关心整页重新加载，您可以将其替换为 webpack/hot/dev-server.

Answer 2

想通了。我错过了一个 module.hot.accept(); 愚蠢的错误...在文档中简要提到，但我应该看到它...

Answer 3

有同样的问题。

或者，可以使用 react-hot-loader 注入必要的代码来启用 HMR。

Webpack HMR 从不更新页面

Webpack HMR never updates the page

javascript

node.js

webpack