javascript - React 服务器端渲染 vs 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/少/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'] = () => {}
   }
   

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