Как пропустить server-side-rendering, react, redux через webpack?

Question

[kherel]

Не могу понять как пропустить серверную часть через webpack.
https://github.com/kherel/server_rendering

в данный момент, часть серверная без webpack но с использованием babel и игнорированием стилей

require('babel-core/register');
['.css', '.less', '.sass', '.ttf', '.woff', '.woff2'].forEach((ext) => require.extensions[ext] = () => {});
require('babel-polyfill');
require('server.js');

в server.js соответственно:

..
 const componentHTML = ReactDom.renderToString(
      <Provider store={store}>
        <RouterContext {...renderProps} />
      </Provider>
    );

без веб-пак, есть 2 проблемы.

1. я использую. resolve: {root: [..]}, что дает возможность отказаться, от относительных путей в проекте.
2. Плюс у меня используется css-modules:

loaders: ["style", "css?modules&importLoaders=1&localIdentName=[path]-[local]&context=src", "sass"],

а также библиотека catnip (https://github.com/alextewpin/catnip), в большенстве компонетов я делаю, что-то типа вот этого:

import catnip from 'catnip';
import styles from './styles.scss';
const cn = catnip(styles)

const ScssComponent = ({color, children}) =>
   <div className={cn({color})}>{children}</div>

в итоге html класс, назначается, в соответсвии с props, что очень удобно.
Конечно если делать серверную часть без webpack, можно сделать все пути поменять, и попытаться вытащить css и подключить его отдельно, обычной css файлом, но я не понял как сделать ExtractTextPlugin.extract в моем случае с module css, пытался настроить но не получилось.
Пытался сделать еще 2 entry и 2 bundle, файла.
вход сделал в моменте ReactDom.renderToString()..,
т.е.

import serverEntry from '../static/bundle.server.js'
..
ReactDom.renderToString(serverEntry(store, renderProps))

но в момент компиляции, ругается на отсутствие window объекта.

Answer 1

[Сергей]

Вместо ExtractTextPlugin используй isomorphic-style-loader, пример:

{ test: /\.(sass|scss)$/, use: [
  { loader: "isomorphic-style-loader" },
  { loader: "css-loader", options: { modules: true }},
  { loader: "postcss-loader" },
  { loader: "sass-loader" }
]}

Так решим проблему только со стилями, плюс рабочие css модули.

Честно сам не могу привести сборку server-side на webpack'e в правильный вид. Но видимо webpack-isomorphic-tools решает все эти проблемы.