问题标签 [webpack-isomorphic-tools]

I'm trying to learn React and the whole environment built around it. I do that by trying to construct my own dev-stack.

The problem I can't get across for a very long time is how to serve CSS/Images while not loosing a power of server rendering.

I've read a couple of tutorials and discovered webpack-isomorphic-tools

I've configured them and managed to get an images supported, sass (transformed to css) as well.

However, I came across an issue that my webpack-assets.json file is not generated, instead I see this output. ( 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 , but it showed that the plugin works when a file is present.)

I understand the purpose of this file, but I can't really figure out why it's not generated at all.

Is there anything that I'm missing? Here are the relevant files and a repository

• https://github.com/jvorcak/universal-react-kit/tree/sass-loader (sass-loader branch on my universal-react-kit repository)
• configuration - https://github.com/jvorcak/universal-react-kit/blob/sass-loader/webpack-isomorphic-tools-configuration.js
• webpack.config.js - https://github.com/jvorcak/universal-react-kit/blob/sass-loader/webpack.config.js
• entry file when running a server https://github.com/jvorcak/universal-react-kit/blob/sass-loader/src/server/index.js

Could somebody please explain what is going on, I've read documentation, blogs, but I'm missing something here. Thank you.

我有一个 movies.js 文件，其中包含：

在组件中我动态使用它。一切正常。但是当我使用 webpack 进行构建时，最终看起来像这样：

和 index.html 是

bundle js 引用了图片，然后我用编辑器在浏览器中打开 html 文件，控制台显示：

控制台没有显示任何错误，我看到捆绑包引用了控制台中的这个哈希，结果只是空白方块：

据我了解，图像被看到、加载、散列、引用......为什么不显示？

webpack 配置如下：

请帮忙，因为我尝试了很多配置和路由，但仍然没有成功并且没有想法。

顺便提一句。它可以静态工作吗？或者也许不可能在带有 index.html 和 ./bundle.js 的浏览器中启动它？还是我需要生成的任何其他必须包含在捆绑包中的额外映射文件？

我是 webpack、node.js 以及基本上是 web 开发的初学者。我正在使用Redux/React/Isomorphic 样板。我正在尝试将React-Toolbox用于所有演示组件，但无法构建/捆绑（npm run dev），因为它会引发错误 - “找不到资产”。请帮我解决这个问题。我在下面给出了所有错误/配置详细信息

运行时出错 - “npm run dev”：

调查.js：

网络包配置：

webpack-isomorphic-tools 配置：

我正在尝试开发一个反应同构应用程序，我最近想出了webpack-isomorphic-toolsnpm 包。
我试图按照文档进行操作，但不幸的是图像和样式文件没有被识别，也没有添加到webpack-assets.json文件中。

到目前为止，我一直使用这种方法：

但我知道 webpack-isomorphic-tools 更有益。

对于 scss 和其他样式文件，这是我在运行服务器时遇到的错误：

对于图像文件，在构建过程中不会显示错误，因为在构建过程中没有检测到图像。这是webpack-assets.js：

相关代码：
webpack-isomorphic-tools-config.js：

index.js（看起来很像文档中的那个）：

webpack.dev.js（webpack-dev-server 配置）：

webpack.config.js：

如果需要更多代码，我很乐意提供，谢谢！

我已经阅读了有关同构应用程序开发的信息，并且已经了解了在服务器端处理资产加载的方法。
一种是webpack-isomorphic-tools。
另一个是这个“hack”，您在 webpack 中定义一个插件，将 process.env.BROWSER 设置为 true，并根据该变量加载资产。IE：

我想知道，哪个更好，为什么？

我已经开始在“通用”应用程序（react-router、redux、webpack - 主要基于https://github.com/erikras/react-redux-universal-hot-example）中实现代码拆分。

在实现代码拆分的（唯一）路线上，我在进行完整的浏览器刷新时收到以下 React 错误消息：

如果我禁用代码拆分，错误消息就会消失。我猜这是因为 React 在 Webpack 加载器加载 Javascript 块之前进行了第一次渲染，因此它生成的标记与服务器上生成的标记不同。那是对的吗？

• 我应该担心错误消息吗？
• 有什么方法可以确定在此消息发生的确切时间 React 呈现什么？
• 有什么办法可以让消息消失吗？（除了不使用代码拆分）

我只是作为后端的 Rails 新手。我正计划开发一个 react/redux/rails 应用程序。

我的问题是，当浏览器请求进来时，我如何至少呈现一个 index.html 以便我可以挂载我的反应组件？

或者在我的情况下我不应该只将rails用作api吗？

谢谢。

我已经创建了一个 react redux 项目，现在我需要在项目中添加一些 SEO 功能。我不想在重构代码时浪费太多时间。有人可以告诉我任何想法吗？

在尝试将项目从 webpack-isomorphic-tools 移植到 Universal-webpack 时，我遇到了一个解决模块依赖关系的奇怪问题。

似乎是模块node_modules，src/js并src/js/constants/*得到解决。但是我在与常量处于同一级别的任何其他目录中的模块上遇到臭名昭著的“无法解析模块”错误。我找不到任何改变 webpack 应该如何对待 src/js/constants 的东西

项目的 webpack 配置和 src/js 树的一部分：

https://gist.github.com/bbss/ffebfaa6bbd9fa1d8e6f6c6842e4add5

我不确定如何进行调试，因此任何指针都会受到赞赏。

背景（可能无关紧要）：我有一个大型反应项目，我正在更改 gulp -> webpack。它是同构的，所以我正在使用 webpack-isomorphic-tools。

所以我有这条线不再有效：

const CANDLE_JPG = require('./assets/candle.jpg');返回错误：

.assets/candle.jpg 不应分配给变量。

但是，如果我将其更改为：

import CANDLE_JPG from './assets/candle.jpg'我得到错误：

./assets/candle.jpg 不应使用默认导入来导入。

想法：我相信 babel 编译可能有问题，但我不确定。我用过require('babel-register')，我的“.bablerc”包含预设es2015，react和stage-0包括插件transform-runtime，和react-hot-loader/babel。

文件加载器：