我正在尝试学习React及其周围的整个环境。我通过尝试构建自己的开发堆栈来做到这一点。
我很长一段时间都无法解决的问题是如何在不失去服务器渲染功能的情况下提供CSS /图像。
我读了一些教程,发现了webpack-isomorphic-tools
我已经配置了它们并设法获得了支持的图像,sass(也转换为css)。
但是,我遇到了一个问题,即我的webpack-assets.json
文件未生成,而是看到了此输出。 (I managed to get it generated on a 2nd run of npm start
before this commit, but that was definitely not a way to go,但是它显示了存在文件时插件可以工作。)
$ npm start
> redux-universal-example@0.0.0 start /Users/janvorcak/learning2016
> node src/server/index.js
[webpack-isomorphic-tools] (waiting for the first Webpack build to finish)
[webpack-isomorphic-tools] (waiting for the first Webpack build to finish)
[webpack-isomorphic-tools] (waiting for the first Webpack build to finish)
[webpack-isomorphic-tools] (waiting for the first Webpack build to finish)
我了解此文件的用途,但是我真的无法弄清楚为什么根本没有生成该文件。
有什么我想念的吗?
这是相关文件和存储库
(我的
universal-react-kit
存储库中的sass-loader分支)https://github.com/jvorcak/universal-react-kit/blob/sass-loader/webpack-isomorphic-tools-configuration.js
https://github.com/jvorcak/universal-react-kit/blob/sass-loader/webpack.config.js
有人可以解释发生了什么吗,我已经阅读了文档,博客,但这里缺少内容。谢谢。
最佳答案
未生成 Assets 文件的原因是因为您已将webpack-dev-server
集成到server.js
中。
https://github.com/jvorcak/universal-react-kit/blob/master/src/server/server.js#L81
这是错误的方法,因为在生产中您不需要webpack-dev-server
,因此它的位置在其他地方。
在您的情况下,webpack-dev-server
旨在生成webpack-assets.json
,并且此webpack-dev-server
在 webpack-isomorphic-tools
.server()
方法调用其回调之后正在运行,但是直到找到webpack-assets.json
,它才会调用其回调。
答案是在一个单独的进程中运行webpack-dev-server
(有关实现该示例的示例,您可能需要引用github.com/erikras/react-redux-universal-hot-example)。
https://github.com/halt-hammerzeit/webpack-isomorphic-tools/issues/47
您可能还喜欢我自己的样板,可以完成所有花哨的事情
https://github.com/halt-hammerzeit/webapp