ReactJS: Hot Reload Не работает

Question

Я новый, чтобы реагировать. Я создал приложение, использующее два сервера: prod.server.js, который содержит все мои маршруты API, и 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); 
}); 

Development Server (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, {}) 
}