反应服务器端渲染与webpack

Question

我是服务器端React渲染的新手，我可以使用webpack为客户端和Express为服务器端（当然通过React）制作简单的同构React应用程序。 但现在我遇到了一些麻烦 - 我决定在我的项目中使用图像：

export default class JustImage extends Component {
  render() {
    return (
      <div>
        <img src={require("just_image.png")} />
      </div>
    );
  }
}

它的代码就像客户端的魅力一样，但是当我尝试渲染时我的服务器端代码告诉我这个错误：

just_image.png: Unexpected character '�'

据我所知，Node.js对webpack加载器一无所知，因此无法正确加载图像。 因为我是React和服务器端渲染的新手，我想知道是否有任何标准方法来解决这个问题 - 不仅仅是图像，我使用图像（PNG / JPEG / JPG / ICO），SVG，SASS / LESS / CSS。 提前致谢。

Answer 1

有两种方法可以解决这个问题，AFAIK：

1. 也可以使用webpack作为服务器代码。 在服务器的webpack配置中，您可以使用为客户端执行的相同加载程序。 例如，您可以将url-loader或file-loader用于图像文件。

    { test: /\\.(jpe?g|png|gif|svg)$/i, loader: 'url-loader', options: { limit: 8192, }, } 

2. 您可以破解服务器代码顶部的require.extensions 。

    if (process.env === 'development') { require.extensions['.png'] = () => {} } 

我在这里发布了一个类似的问题没有得到答案:)

Answer 2

我通过阅读react-starter-kit代码了解了很多，基本上是Ming Soon告诉你的，你必须用webpack编译你的服务器端代码，你需要多个webpack配置。