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 个选项:

1. 同样使用 webpack 编译客户端代码.如果客户进入点与服务器位于同一目录中 - 它应该与您的当前代码.这对我来说看起来很自然.
2. 使用相对路径，即从'./components/header/main'导入标题

这篇关于Webpack-dev-server 和同构的 react-node 应用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！