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, Стилус, рули), но это не должен» .

У меня есть проект 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' ] }) ] 
}; 

Глоток задача

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

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

Answer 2

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

Answer 3

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

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