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,手写笔,模板等,都会发生这种情况。一切都是通过转换(巴别塔,手写笔,把手)来实现的,但这并不重要。

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

的WebPack-configuration:

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

我不是一个webpack的专家,但我有一个类似的问题。 webpack/hot/only-dev-server运行时只更新可热replace的模块,不会完全重新加载。 如果你不关心整个页面的重新加载,你可以用webpack/hot/dev-serverreplace它。

弄清楚了。 我错过了一个module.hot.accept(); 愚蠢的错误…在文档中简短地提到,但我应该看到它…

有同样的问题。

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