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

Question

我配置了一个通用的 React 项目，我在其中使用 Webpack 为 client 和 server 代码创建包。

当我运行服务器直接通过 Webpack 的目标捆绑输出时，这工作正常。

 node ./build/server/main.js

但是，当我尝试运行 "live" 开发服务器时遇到问题。在这种情况下，我不想以捆绑的服务器文件为目标，而是直接以源文件为目标，这将允许我运行 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/shared/components/Foo

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

轰！我已经设法在没有任何第 3 方库来帮助我的情况下实现了这一目标。 universal-webpack 非常酷，比之前的 webpack-isomorphic-tools 更干净，但我喜欢我有一个最小的配置设置，其中尽可能少的通用 webpack 配置渗入我的生产代码。

我对结果非常满意。客户端包由最新的 react-hot-loader v3 beta 支持，这给了我一个很棒的 HMR 体验，并且我的服务器包会在任何文件更改时重建，因此也不必手动重新启动我的服务器。创造一个非常甜蜜的开发体验。

我打算将其放入样板（是的，我知道，还有一个），但也许它对其他人有用。

Answer 1

我创建了一个工作解决方案，实现了我想要从配置中获得的一切。

都在以下样板代码库中： https://github.com/ctrlplusb/react-universally

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

Supporting webpack dependant imports during node dev server execution (a React server rendering context)

node.js

reactjs

webpack

server-side-rendering