README.md: server-side rendering example.

Author: BurkovBA

README.md

@@ -491,6 +491,73 @@ module.exports = {
 }
 ```
 
+### Server-side rendering
+
+Suppose that you want to create a webpack build of your [isomorphic](https://www.lullabot.com/articles/what-is-an-isomorphic-application)/[universal](http://www.acuriousanimal.com/2016/08/10/universal-applications.html) web application that pre-renders pages on the server side. Your app is written in something like ECMA6 and SASS and requires transpilation, and also has CSS dependencies, such as `bootstrap.min.css`, installed from `node_modules`.
+
+There are several caveats in setting up webpack and css-loader for server-side environment:
+
+1) As of February, 2018, `style-loader` [is not isomorphic](https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/503), it doesn't work in server-side node.js because it refers to `window` global when trying to inline your `css` into the javascript bundle. So, when building you webpack bundle on server side, you HAVE to use [extract-text-webpack-plugin](https://github.com/webpack-contrib/extract-text-webpack-plugin) to extract styles into a separate file (and [you shouldn't even fallback to ExtractTextPlugin](https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/503) as it was suggested in previous section). `css-loader` should pass the extracted css straight to `ExtractTextPlugin`.
+2) You have to set [target: node](https://webpack.js.org/concepts/targets/#usage) for webpack to keep standard node.js modules outside of the bundle. 
+3) You have to use (webpack-node-externals)[https://github.com/liady/webpack-node-externals] to keep your javascript dependencies from `node_modules` outside of the webpack bundle. Webpack bundle will just `require()` them straight from `node_modules` folder.
+4) However, with default `webpack-node-externals` setup, css that resides in `node_modules` will also get excluded from the bundle and webpack bundle will just try to `require()` them as if they were a javascript, resulting in `SyntaxError`. Thus, you have to [whitelist any non-javascript dependencies](https://github.com/liady/webpack-node-externals#how-can-i-bundle-required-assets-ie-css-files-from-node_modules) (including css) that you are importing from `node_modules`.
+
+Here is an example of webpack configuration for server-side rendering:
+
+```js
+const path = require('path');
+
+const webpack = require('webpack');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const nodeExternals = require('webpack-node-externals');
+
+module.exports = {
+  target: 'node', // don't bundle standard node.js modules such as http or path
+  externals: [nodeExternals({ // don't bundle dependencies from node_modules folder, except by non-javascript files
+    whitelist: [ // non-javascript files in node_modules should go to the bundle and be processed by ExtractTextPlugin
+      /\.(?!(?:jsx?|json)$).{1,5}$/i,
+    ],
+  })],
+  entry: path.resolve(__dirname, 'src', 'server', 'app.jsx'),
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    publicPath: '/dist/',
+    filename: 'server.js'
+  },
+  resolve: {
+    modules: [path.join(__dirname, 'src'), path.join(__dirname, 'node_modules')]
+  },
+  plugins: [
+    new ExtractTextPlugin('server.css') // extract css and sass files into server.css bundle
+  ],
+  module: {
+    rules: [
+      ...
+      {
+        test: /\.(scss|sass)$/,
+        use: ExtractTextPlugin.extract({
+          use: [
+            { loader: 'css-loader', options: {sourceMap: true} },
+            { loader: 'sass-loader', options: {sourceMap: true} }
+          ]
+        })
+      },
+      {
+        test: /\.css$/,
+        use: ExtractTextPlugin.extract({
+          use: [
+            { loader: 'css-loader', options: {sourceMap: true} }
+          ]
+        })
+      },
+      ...
+    ]
+  }
+};
+```
+
+
+
 <h2 align="center">Maintainers</h2>
 
 <table>