Question

我配置了一个通用的React项目，我在其中使用Webpack为客户端和服务器代码创建包。

当我通过Webpack定向捆绑输出直接运行服务器时，这很正常。

 node ./build/server/main.js

然而，当我尝试运行＆＃34; live＆＃34;开发服务器。在这种情况下，我不想定位捆绑的服务器文件，而是直接定位源文件，这将允许我运行webpack热中间件以进行实时代码更改。下面是服务器主文件的精简版本。

src / server / index.js

import express from 'express'
import universalReactAppMiddleware from './middleware/universalReactApp'

const server = express()

// Get the client bundle webpack configuration.
const webpackClientConfig = require('../../webpack.client.config.js')

// If we are in development mode we will add the webpack hot 
// reloading middleware.
if (process.env.NODE_ENV === 'development') {
  const webpack = require('webpack')
  const clientCompiler = webpack(webpackClientConfig)
  const createWebpackMiddleware = require('webpack-dev-middleware')
  const createWebpackHotMiddleware = require('webpack-hot-middleware')
  server.use(
    createWebpackMiddleware(clientCompiler, {
      noInfo: true,
      publicPath: webpackClientConfig.output.publicPath,
      stats: {
        colors: true,
        hash: false,
        timings: true,
        chunks: false,
        chunkModules: true,
        modules: false
      }
    })
  )
  server.use(
    createWebpackHotMiddleware(clientCompiler)
  )
}

// Configure static serving of our webpack bundled client files.
server.use(
  webpackClientConfig.output.publicPath,
  express.static(webpackClientConfig.output.path))

// Bind our universal react app middleware for all GET requests.
server.get('*', universalReactAppMiddleware)

server.listen(process.env.SERVER_PORT)

现在执行此示例：

NODE_ENV=development babel-node ./src/server

它启动正常，但是universalReactAppMiddleware处理请求的那一刻它将尝试为已解析的组件执行服务器呈现。然后由于我的一些组件导入images / css而失败，例如：

SRC /共享/组件/富

import './styles.css'
import background from './background.jpg'

function FooComponent() {
  return <img src={background} />
}

电脑说没有！

执行时，我的快递服务器会抛出一个异常，说明意外的语法。它基本上尝试将css和图像导入解析为Javascript。这些类型的导入依赖于我的webpack加载器才能正常运行。

所以现在我正在尝试寻找一种欺骗Webpack行为的机制，以便我可以执行这些类型的组件。我正在调查Pete Hunts webpack-require，但一直遇到困难。

有没有人知道任何其他适用于此背景的方法？

更新2016/06/15

轰！我设法在没有任何第三方库的情况下解决这个问题。 universal-webpack非常酷，比以前的webpack-isomorphic-tools更干净，但我更喜欢我有一个最小的配置设置，其中尽可能少的通用webpack配置渗透到我的生产代码中。

我对结果非常感兴趣。客户端软件包由最新的react-hot-loader v3 beta支持，这给我带来了非常棒的HMR体验，我的服务器软件包在任何文件更改时都会重建，因此无需手动重启我的服务器。创造一个非常甜蜜的开发体验。

我将把它扔进样板（是的，我知道，还有另一个），但也许对其他人有用。

Answer 1

我创建了一个可行的解决方案，从配置中实现了我想要的一切。

这些都在以下样板回购中： https://github.com/ctrlplusb/react-universally

在节点开发服务器执行期间支持webpack依赖导入（React服务器呈现上下文）

1 个答案: