ReactJS：Hot Reload不能正常工作

Question

我是新來的反應。我創建了使用兩個服務器，它擁有我所有的API的路由的prod.server.js和dev.server.js它初始化的WebPack-DEV-服務器，並從prod.server.js運行一個單獨的端口和代理的所有請求/api/*路徑到生產服務器的應用程序。我分離了這兩個，所以當我最終將我的應用程序推向生產時，我不需要編輯服務器。

這裏是我的兩個服務器：
生產服務器（prod.server.js）

const express = require("express"); 
const api = require('./server/routes/api') 
const http = require('./server/routes/http') 

const app = express(); 
app.use(express.static(process.cwd() + '/public')); 
api(app, __dirname + "/public"); 
http(app, __dirname + "/public"); 


app.get('/*', (req, res) => { 
    res.sendFile(__dirname + "/index.html") 
}); 

app.listen(process.env.NODE_ENV || 8001, function() { 
    console.log("Application started on port", process.env.NODE_ENV || 8001); 
}); 

開發服務器（dev.server.js）

var WebpackDevServer = require('webpack-dev-server'); 
const api = require('./server/routes/api') 
const http = require('./server/routes/http') 
var webpack = require('webpack'); 
var config = require('./webpack.config'); 
var path = require('path'); 

var compiler = webpack(config); 

var server = new WebpackDevServer(compiler, { 
    proxy: { 
     '/api': { 
      target: 'http://localhost:8001', 
      secure: false 
      } 
    }, 
    historyApiFallback: true, 
    hot: true, 
    filename: 'bundle.js', 
    publicPath: '/', 
    stats: { 
     colors: true, 
    }, 
}); 

server.listen(8000, function() { 
    console.log("Application Dev running at port 8000"); 
}); 

我期待當我更新我的反應時，瀏覽器應該選擇相應的更改並重新加載，但這不會發生。我必須重新加載，而且我一直這樣做了一段時間，但是現在我已經變得狡猾了，我寧願有熱的重新加載，任何幫助？

如果需要，下面是我的WebPack配置。

var HtmlWebpackPlugin = require('html-webpack-plugin'); 

module.exports = { 
    entry: [ 
     __dirname + "/client/index.js" 
    ], 
    output: { 
     path: __dirname + "/public", 
     filename: "bundle.js" 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.js$/, 
       loader: ['babel'], 
       query: 
       { 
        presets: 
        [ 
         'es2015', 
         'react' 
        ] 
       }, 
       exclude: /node_modules/ 
      }, 
      { 
       test: /\.css$/, 
       loaders: ['style', 'css'], 
       exclude: /node_modules/ 
      } 
     ] 
    }, 
    plugins:[ 
     new HtmlWebpackPlugin({ 
      template: __dirname + '/client/index.html' 
     }) 
    ] 
} 

Answer 1

您應該HotModuleReplacementPlugin()包添加到您的插件列表，像這樣：

plugins:[ 
    new webpack.HotModuleReplacementPlugin(), 
    new HtmlWebpackPlugin({ 
     template: __dirname + '/client/index.html' 
    }) 
] 

我熱重裝工作正常，我那麼萬一有別的東西，我已經錯過了，在這裏是我webpack.config的副本，供您檢查：

全部webpack.config

const path = require('path') 
const merge = require('webpack-merge') 
const webpack = require('webpack') 
const NpmInstallPlugin = require('npm-install-webpack-plugin') 
const OpenBrowserPlugin = require('open-browser-webpack-plugin') 
const HtmlWebpackPlugin = require('html-webpack-plugin') 

const TARGET = process.env.npm_lifecycle_event 
process.env.BABEL_ENV = TARGET 
process.env.PORT = 3001 
process.env.HOST = 'localhost' 

const PATHS = { 
    app: path.join(__dirname, 'src'), 
    react: path.resolve('./node_modules/react') 
} 

const common = { 
    entry: { 
    app: PATHS.app 
    }, 
    resolve: { 
    extensions: ['.js', '.jsx'], 
    alias: {react: PATHS.react} 
    }, 
    module: { 
    loaders: [ 
     { 
     enforce: 'pre', 
     test: /\.js$/, 
     loader: 'eslint', 
     include: PATHS.app 
     }, 
     { 
     test: /\.css$/, 
     loaders: ['style', 'css'], 
     include: PATHS.app 
     }, 
     { 
     test: /\.jsx?$/, 
     loaders: ['babel'], 
     include: PATHS.app 
     } 
    ] 
    } 
} 

if (TARGET === 'start' || !TARGET) { 
    const config = merge(common, { 
    devServer: { 
     historyApiFallback: true, 
     hot: true, 
     inline: true, 
     progress: true, 
     stats: 'errors-only', 
     host: process.env.HOST, 
     port: process.env.PORT 
    }, 
    plugins: [ 
     new webpack.SourceMapDevToolPlugin(), 
     new webpack.HotModuleReplacementPlugin(), 
     new OpenBrowserPlugin({ 
     url: `http://${process.env.HOST}:${process.env.PORT}/` 
     }), 
     new NpmInstallPlugin({ 
     save: true 
     }), 
     new HtmlWebpackPlugin({ 
     template: PATHS.app + '/index.html', 
     inject: 'body' 
     }) 
    ] 
    }) 
    module.exports = config 
} 

if (TARGET === 'build') { 
    module.exports = merge(common, {}) 
}