Webpack-dev-server和同構反應節點應用程序

Question

我已經設法通過使用webpack配置中的插件部分，將webpack開發服務器與節點服務器（快速）一起正確使用。

一切正常，但現在我正嘗試同構並在快速應用程序內部使用客戶端組件。

到目前為止，我所遇到的唯一問題是，如果沒有webpack解析服務器端代碼，我就會遇到需要組件但無法解決路徑的情況

IE

內部組件

'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還是必須將所有導入更改為有效的服務器端？

代碼庫在這里，以防您想要查看實際狀態https://github.com/vshjxyz/es6-react-flux-node-quickstart

Answer 1

為了能夠以諸如require('components/Header.js');類的方式require('components/Header.js'); 並避免使用較長的相對路徑，例如require('../../../../../../Header.js'); 您可以在任何require（）調用之前將此代碼添加到您的節點應用程序：

process.env.NODE_PATH = __dirname;
require('module').Module._initPaths();

但是，由於這依賴於私有的Node.js核心方法，因此這也是一種黑客，可能會停止在該節點的上一個或下一個版本上運行。

有關此問題的其他可能解決方案，請參見https://gist.github.com/branneman/8048520

Answer 2

我看到2個選項：

1. 以及使用webpack編譯客戶端代碼。 如果客戶端的入口點與服務器的目錄相同，則它應與您當前的代碼一起使用。 在我看來，這很自然。
2. 使用相對路徑，即import Header from './components/header/main'