node.js - 使用 webpack 在 Node 服务器上渲染 React 组件

Question

我有一个 react 组件。 <myFooter> 。这是一个简单的页脚。

import React from 'react';
import './my-footer.scss';

export default class myFooter extends React.Component {
  render() {
    return (
    <footer className="col-xs-12">
      hello !
    </footer>
    );
  }
}

我想从服务器端渲染它。在后端，我有一个 Express 服务器。为此我写了这个:

import myFooter from '../components/my-footer.jsx';

app.get('/footer', function(req, res) {
  var string1 = ReactDOMServer.renderToString(myFooter);
  res.send(string1);
});

现在的问题是服务器无法读取 sass 文件。对于客户端渲染，我使用 webpack。 Webpack 构建所有内容并提供捆绑文件。

但我不确定如果是服务器端会发生什么。如何使用 webpack 进行编译？如果可以的话，我是否需要为 Node 服务器上的每个请求编译我的应用程序？

Answer 1

您需要 2 个 webpack 构建:

1 构建客户端 1 搭建服务器。

构建服务器时，请在 webpack 配置中使用 css-loader/locals 而不是 css-loader。

阅读本期以了解更多详细信息:https://github.com/webpack/css-loader/issues/59