React服務器端渲染vs webpack

我是服務器端React渲染的新手，我可以爲客戶端和服務器端的Express（通過React當然）製作簡單的同構React應用程序。但現在我有一些麻煩 - 我決定在我的項目中使用的圖像：React服務器端渲染vs webpack

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。提前致謝。

來源

2017-02-20 malcoauri

有兩種方法來解決這個問題，據我所知：

使用webpack爲您的服務器代碼。在服務器的webpack配置中，可以使用與客戶端相同的加載程序。例如，您可以使用url-loader或file-loader作爲圖像文件。
```
{ 
    test: /\.(jpe?g|png|gif|svg)$/i, 
    loader: 'url-loader', 
    options: { 
    limit: 8192, 
    }, 
} 
```

你可以在你的服務器代碼的頂部劈require.extensions。

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

我張貼了類似的問題here沒有得到一個答案:)

來源

2017-02-20 18:28:18

感謝您的回答。但我不明白我如何使用webpack作爲服務器代碼。請給我舉個例子。 – malcoauri

'start'腳本可以是'webpack --watch --config config/your-server-config.js && babel-node dist/server.js'。對於我的個人項目，我選擇了第二種選擇，因爲每次代碼更改需要一些時間並且不適合開發時，重新捆綁服務器代碼，我想。對於示例代碼/配置：https://github.com/ming-soon/mern-starter –

但是，如果您將使用2選項，您的服務器端代碼將被打破嗎？ – malcoauri

我學到了很多關於這個通過閱讀react-starter-kit代碼，它基本上是什麼明很快告訴你，你要用webpack編譯你的服務器端代碼，你將需要多個webpack配置。

來源

2017-04-17 08:04:41 Faris

React服務器端渲染vs webpack

回答

相關問題