ReactJS：Hot Reload不工作-Java 学习之路

我是新来的反应 . 我创建了一个使用两个服务器的应用程序，一个保存我所有API路由的 prod.server.js 和一个 dev.server.js ，它初始化webpack-dev-server并在 prod.server.js 的单独端口上运行，代理所有请求到生产环境服务器的 /api/* 路径 . 我将这两个分开，以便当我最终将我的应用程序推向生产环境时，我永远不必编辑服务器 .

这是我的两台服务器：
Production Server (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");
});

我希望当我更新我的反应时，浏览器应该接收更改并相应地重新加载，但这不会发生 . 我必须重新加载，我已经这样做了一段时间，但我现在已经冷落，我宁愿有热重装，任何帮助？

Below is my webpack config if needed.

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

1 回答

您应该将 HotModuleReplacementPlugin() 包添加到插件列表中，如下所示：

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

我的热重装对我来说很好，以防万一我还错过了其他的东西，这里是我的webpack.config的副本供你检查：

Full 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, {})
}

回复于 2024-04-29T08:41:12+08:00

ReactJS：Hot Reload不工作

1 回答

相关问题