Подтвердить что ты не робот

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');
});
4b9b3361

Ответ 1

Выяснил это. Мне не хватало ошибки module.hot.accept(); Stupid... Коротко упоминается в документах, но я должен был ее увидеть...

Ответ 2

Я не специалист по webpack, но у меня была аналогичная проблема. Среда выполнения webpack/hot/only-dev-server только обновляет модули, которые с возможностью горячей замены и не выполняет полную перезагрузку. Если вас не волнует полная перезагрузка страницы, вы можете заменить ее на webpack/hot/dev-server.

Ответ 3

Имел ту же проблему.

В качестве альтернативы можно ввести необходимый код, чтобы включить HMR с помощью реактора с горячей реакцией.