Поддержка зависимых импорта WebPack во исполнение узла DEV сервера (а React сервер визуализации контекста)

Question

У меня есть универсальный Реагировать проект настроен, в котором я использую Webpack для создания пучков для обоих клиента и сервера кода.

Это прекрасно работает, когда я запускаю сервер напрямую через целевую версию Webpack.

node ./build/server/main.js 

Однако у меня возникают проблемы, когда я пытаюсь запустить «живой» сервер разработки. В этом случае я не хочу таргетировать связанные файлы сервера, вместо этого я просто нацелен на исходные файлы напрямую, что позволит мне запускать промежуточное ПО webpack для живых изменений кода. Ниже приведена урезанная версия основного файла для сервера.

---

ЦСИ/сервер/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 обрабатывает запрос, он попытается выполнить рендеринг сервера для решения ed Component. Это то падает, потому что некоторые из моих компонентов импортировать изображения/CSS, например:

---

SRC/Shared/компоненты/Foo

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

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

---

Компьютер говорит, что нет!

После выполнения мой экспресс-сервер выдает исключение из-за неожиданного синтаксиса. Он в основном пытается проанализировать импорт css и изображений как Javascript. Эти типы импорта зависят от того, что мои загрузчики веб-пакетов работают правильно.

---

Так что теперь я пытаюсь искать механизм подмены поведения Webpack так, что я могу выполнить эти типы компонентов. webpack-require Pete Hunts, но у него были трудности.

Кто-нибудь знает какие-либо другие подходы, которые будут работать в этом контексте?

---

Update 2016/06/15

Boom! Мне удалось снять это без каких-либо сторонних библиотек, чтобы помочь мне. universal-webpack довольно круто и намного чище, чем предыдущие webpack-isomorphic-tools, но мне нравится, что у меня есть минимальная конфигурация, в которой как можно меньше конфигурации универсального webpack проникает в мой производственный код.

Я доволен результатами.Клиентский пакет поддерживается последней бета-версией react-hot-loader v3, которая дает мне потрясающий опыт работы с HMR, и мой пакет серверов восстанавливается при любых изменениях файлов, поэтому не нужно вручную перезапускать мой сервер. Создание для довольно сладкого опыта развития.

Я собираюсь бросить это в шаблон (да, я знаю, еще один), но, возможно, он будет полезен кому-то другому.

Answer 1

Я создал рабочее решение, обеспечивающее все, что я хотел от конфигурации.

Это все в пределах следующего шаблонного репо: https://github.com/ctrlplusb/react-universally