0

我已经对此进行了大量阅读，似乎 github 上提供了很多样板文件，它们都可以使用 webpack-dev-server 来重建客户端包。但是，我不确定服务器如何或是否重新加载热模块。有没有办法配置 webpack 以在服务器端启用 HMR？否则，似乎我更改的任何内容都不会由服务器呈现，只会在客户端刷新。

我的 webpack 配置看起来像这样：

module.exports = {
  entry: "./js/client.js",
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015', 'stage-0'],
          plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'],
        }
      }
    ]
  },
  output: {
    path: __dirname + "/public/",
    filename: "client.min.js"
  }
};

server.js：

app.get('/', function(request, response) {
  var html = ReactDOMServer.renderToString(React.createElement(Component));
  response.send(html);
});

组件.js：

module.exports = React.createClass({
  _handleClick: function() {
    alert();
  },

  render: function() {
    return (
      <html>
        <head>
          <title>{this.props.title}</title>
          <link rel="stylesheet" href="/style.css" />
        </head>
        <body>
          <h1>{this.props.title}</h1>
          <p>isn't server-side rendering remarkable?</p>
          <button onClick={this._handleClick}>Click me</button>
          <script dangerouslySetInnerHTML={{
            __html: 'window.PROPS=' + JSON.stringify(this.props)
          }} />
          <script src="/client.min.js" />
        </body>
      </html>
    );
  }
})

和client.js：

var props = window.PROPS;

ReactDOM.render(React.createElement(Component, props), document);

我webpack-dev-server --content-base src --inline --hot用来运行 webpack

4

1 回答 1

1

您将希望通过您的server.js. 在您的文件中创建一个脚本package.json来运行该文件。

例如：

"serve":"nodemon server.js"

然后，添加一个替代方案，它webpack-dev-server可以帮助您。webpack-dev-middlewarewebpack-hot-middlwareHMR

这就是你的server.js样子：

import express from 'express';
import webpack from 'webpack';
import path from 'path';
import webpackDevMiddleware from 'webpack-dev-middleware';
import webpackHotMiddleware from 'webpack-hot-middleware';

const port = 5000;
const app = express();
const config = require(path.resolve("./webpack.config.js"));

const compiler = webpack(config);

app.use(webpackDevMiddleware(compiler, {
  noInfo: true,
  publicPath: config.output.publicPath,
}));

app.use(webpackHotMiddleware(compiler));

app.get("*", function(req, res, next) {
    res.sendFile( path.join( __dirname, '/path/to/your/index.html') );
});

app.listen(port, function(err) {
    if(err) {
        return console.log(err);
    }
    return console.log(`App is now running on http://localhost:${port}`);
});

然后，运行您的脚本，如下所示：

npm run serve

只需访问浏览器上的端口，您的客户端就会出现。

希望这可以帮助。

于 2017-02-09T08:00:25.497 回答