Question

我是新手做出反应。我创建了一个使用两个服务器的应用程序，一个prod.server.js保存我所有的API路由，一个dev.server.js初始化webpack-dev-server并在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, {})
}

ReactJS：Hot Reload不工作

1 个答案: