webpack Entwickler Middleware, wie man Autonachlademode wenn HMR

Question

versagt Ich erhalte die folgende Meldung in der Konsole meines Browsers, wenn ich meine Javascript Quelle ändern:

[HMR] Die folgenden Module nicht heiß aktualisiert werden können: (Vollständige reload benötigt) Dies ist in der Regel, weil die Module, die sich geändert haben (und ihre Eltern) nicht wissen, wie sie sich neu laden. Weitere Details finden Sie unter http://webpack.github.io/docs/hot-module-replacement-with-webpack.html .

Meine Frage ist, wie kann ich Webpack sagen, um automatisch die Seite neu zu laden, wenn dies passiert?

Hier ist mein Server eingerichtet:

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

und meine webpack.config:

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

Vielen Dank im Voraus?

Answer 1

können Sie passieren parameterreload-webpack-hot-middleware/client:

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