webpack dev middleware, làm thế nào để tự động nạp lại khi HMR không

Question

Tôi nhận được thông báo sau trong giao diện điều khiển của trình duyệt của tôi khi tôi thay đổi mã nguồn javascript của tôi:

[HMR] Các module sau đây không thể nóng Cập nhật: (Tải lại đầy đủ cần thiết) Điều này thường là do các mô-đun đã thay đổi (và cha mẹ của họ) không biết cách tải lại chính mình. Xem http://webpack.github.io/docs/hot-module-replacement-with-webpack.html để biết thêm chi tiết.

Câu hỏi của tôi là làm thế nào tôi có thể yêu cầu webpack chỉ tự động tải lại trang khi điều này xảy ra?

Dưới đây là máy chủ của tôi thành lập:

app.use(morgan('dev')); 

     // Disable views cache 
     app.set('view cache', false); 

     var webpack = require('webpack'); 

     var webpackConfig = require('../client/webpack.config'); 
     var compiler = webpack(webpackConfig); 

     app.use(require("webpack-dev-middleware")(compiler, { 
      noInfo: true, publicPath: webpackConfig.output.publicPath 
     })); 
     app.use(require("webpack-hot-middleware")(compiler)); 

và webpack.config tôi:

var path = require('path'); 
var AureliaWebpackPlugin = require('../node_modules/aurelia-webpack-plugin'); 
var webpack = require('../node_modules/webpack'); 

module.exports = { 
    entry: { 
     main: [ 
      'webpack-hot-middleware/client', 
      './client/src/main' 
     ] 
    }, 
    resolve: { 
     alias: { 
      breeze: 'breeze-client/build/breeze.debug', 
      resources: path.resolve(__dirname, 'src', 'resources'), 
      utils: path.resolve(__dirname, 'src', 'resources', 'utils', 'utils'), 
      tradestudyUtils: path.resolve(__dirname, 'src', 'resources', 'tradestudy-utils', 'tradestudy-utils') 
     } 
    }, 
    output: { 
     path: path.join(__dirname, 'client'), 
     filename: 'bundle.js', 
     publicPath: '/' 
    }, 
    devtool: 'eval', 
    plugins: [ 
     new webpack.optimize.OccurenceOrderPlugin(), 
     new webpack.HotModuleReplacementPlugin(), 
     new webpack.NoErrorsPlugin(), 
     new AureliaWebpackPlugin() 
    ], 
    module: { 
     //preLoaders: [ 
     // {test: /\.js$/, exclude: /node_modules/, loader: 'eslint-loader'} 
     //], 
     loaders: [ 
      { test: /\.scss$/, loaders: ['style', 'css', 'sass'] }, 
      { test: /\.js$/, loader: 'babel', exclude: /node_modules/, query: { presets: ['es2015-loose', 'stage-1'], plugins: ['transform-decorators-legacy'] } }, 
      { test: /\.css?$/, loader: 'style!css' }, 
      { test: /\.html$/, loader: 'raw' }, 
      { test: /\.(png|gif|jpg)$/, loader: 'url-loader?limit=8192' }, 
      { test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader?limit=10000&minetype=application/font-woff2' }, 
      { test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader?limit=10000&minetype=application/font-woff' }, 
      { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file-loader' } 
     ] 
    } 
}; 

Cảm ơn trước?

Answer 1

Bạn có thể vượt qua parameterreload-webpack-hot-middleware/client:

entry: { 
     main: [ 
      'webpack-hot-middleware/client?reload=true', 
      './client/src/main' 
     ] 
    },