javascript - 无法使用 webpack-isomorphic-tools 生成 webpack-assets.json

标签 javascript reactjs webpack webpack-isomorphic-tools

我正在尝试学习 React 以及围绕它构建的整个环境。我通过尝试构建自己的开发堆栈来做到这一点。

我很长一段时间都无法解决的问题是如何在不失去服务器渲染能力的情况下提供 CSS/Images。

我阅读了一些教程并发现了 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)

我明白这个文件的用途,但我真的不明白为什么它根本没有生成。

有什么我想念的吗? 这是相关文件和存储库

有人可以解释一下发生了什么吗,我已经阅读了文档和博客,但我在这里遗漏了一些东西。谢谢。

最佳答案

未生成 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 正在run after 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

关于javascript - 无法使用 webpack-isomorphic-tools 生成 webpack-assets.json,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35325980/

相关文章:

webpack - 将 eslint-webpack-plugin 添加到项目中以提供 Typescript linting

objective-c - 使用 Objective C 桥接 React Native 和 Swift 类

angularjs - webpack 和 less 如何在 css 中包含图像 url

javascript - 在单页网站上设置联系表单/脚本

javascript - DurandalJS - 在页面根上强制执行完整激活周期(又名 : fire "deactivate" on app. setRoot())

javascript - 如何从两个库导入两个相同名称的组件?

javascript - 创建具有圆 Angular 边缘的 Rechart 条形图

javascript - 在编译时检测不受支持的正则表达式功能

javascript - webpack 从多个入口文件导出类

javascript - Jquery 应该从表单返回一组数据,返回两个