Webpack-dev-server 和同构的 react-node 应用 [英] Webpack-dev-server and isomorphic react-node application
问题描述
我已经成功地使用 webpack 配置中的插件部分正确使用 webpack 开发服务器和节点服务器(express).
I've managed to properly use webpack dev server alongside with a node server (express), using the plugin section inside webpack's config.
一切正常,但现在我正在尝试使用同构并在 express 应用程序中使用客户端组件.
It all works fine but now I'm trying to go isomorphic and use client-side components inside the express application.
到目前为止,我遇到的唯一问题是,如果没有 webpack解析"我的服务器端代码,我会遇到需要组件但路径未解决的情况
So far the only problem I'm encountering is that without webpack 'parsing' my server-side code I get to a situation where I require components but the paths are not solved
I.E.
组件内部
'use strict';
import React from 'react';
import { RouteHandler, Link } from 'react-router';
import Header from 'components/header/main'; // <-- This line causes the error because webpack is not working when parsing this JSX server-side
export default React.createClass({
displayName: 'App',
render() {
return ( // ... More code
我应该以其他方式配置 webpack 还是必须将所有导入更改为有效的服务器端?
Shall I configure webpack in another way or do I have to change all the imports to be valid server-side?
代码库在这里,以防您想查看实际状态 https://github.com/vshjxyz/es6-react-flux-node-quickstart
the codebase is here in case you want to see the actual state https://github.com/vshjxyz/es6-react-flux-node-quickstart
推荐答案
我看到 2 个选项:
- 同样使用 webpack 编译客户端代码.如果客户进入点与服务器位于同一目录中 - 它应该与您的当前代码.这对我来说看起来很自然.
- 使用相对路径,即
从'./components/header/main'导入标题
这篇关于Webpack-dev-server 和同构的 react-node 应用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!