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

回答

相关问题