反應服務器端渲染與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配置。