Webpack HMR non aggiorna mai la pagina

Question

Ho lavorato con diverse funzionalità di Webpack e sto lentamente dando un senso alle cose.

tipica console-uscita:

[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. 

Questo accade non importa quale parte del codice viene aggiornato, JS, stilo, modelli ecc Tutto passa attraverso trasformazioni (Babel, Stylus, manubrio), ma che shouldn' t importa

Ho un progetto GitHub se qualcuno desidera visualizzare il codice sorgente completo: https://github.com/SimenB/webpack-fun. npm install && npm start per eseguirlo.

Webpack-config:

'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 compito

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

Capito. Mi mancava un errore Stupido module.hot.accept(); ... Brevemente menzionato nei documenti, ma avrei dovuto vederlo ...

Answer 2

Im non un esperto di webpack, ma ho avuto un problema simile. Il runtime webpack/hot/only-dev-server aggiorna solo i moduli che sono sostituibili a caldo e non esegue un ricaricamento completo. Se non ti interessa ricaricare la pagina intera, puoi sostituirla con webpack/hot/dev-server.

Answer 3

Aveva lo stesso problema.

In alternativa, è possibile iniettare il codice necessario per abilitare HMR utilizzando react-hot-loader.