How to pass server-side-rendering, react, redux through webpack?

Question

Express.js

I can't figure out how to pass the server side through webpack.
https://github.com/kherel/server_rendering
at the moment, server part without webpack but using babel and ignoring styles

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

in server.js respectively:

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

without webpack, there are 2 problems.
1. I use. resolve: {root: [..]}, which makes it possible to opt out of relative paths in the project.
2. Plus I use css-modules:

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

as well as the catnip library ( https://github.com/alextewpin/catnip), in most components I do something like this:

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

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

as a result, the html class is assigned according to props, which is very convenient.
Of course, if you do the server part without webpack, you can change all the paths, and try to pull out the css and connect it separately, with the usual css file, but I didn’t understand how to make ExtractTextPlugin.extract in my case with module css, I tried to set it up but it didn’t work out.
Tried to make 2 more entries and 2 bundle files.
input made at the moment ReactDom.renderToString()..,
i.e.

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

but at the time of compilation, it swears at the absence of a window object.

Answer 1

Instead of ExtractTextPlugin use isomorphic-style-loader, example:

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

So we will solve the problem only with styles, plus working css modules.
Honestly, I myself can not bring the server-side assembly on webpack into the correct form. But apparently webpack-isomorphic-tools solves all these problems.