How do I render a pug/jade template with React, Node and Webpack?
<p>I have a React/Node/Express application, and I am using Webpack to build it. </p>

<p>Currently, the structure of the directory is as such:</p>

<pre><code>node_modules
public
    app
        main.js
        main.map.js
    index.html
src
    client
        components
            Home.js
            Header.js
            Root.js
            User.js
        main.js
    server
        views
            index.html
        index.js
package.json
webpack.config.js
</code></pre>

<p>This is my webpack.config.js</p>

<pre><code>var path = require("path");

var DIST_DIR = path.resolve(__dirname, "public");

var SRC_DIR = path.resolve(__dirname, "src");

var config = {
    entry: SRC_DIR + "/client/main.js",
    output: {
        path: DIST_DIR + "/app",
        filename: "main.js",
        publicPath: "/app"
    },
    module:{
        loaders: [
            {
                test: /\.js?/,
                include: SRC_DIR,
                loader: "babel-loader",
                query:{
                    presets:["react", "es2015", "stage-2"]
                }
            }
        ]
    }
};

module.exports = config;
</code></pre>

<p>And this is my package.json</p>

<pre><code>{
  "name": "react-webpack",
  "version": "1.0.0",
  "description": "",
  "main": "/src/server/index.js",
  "scripts": {
    "start": "npm run build",
    "build": "webpack -d &amp;&amp; xcopy \"src/server/views/index.html\" \"public\" /F /Y &amp;&amp; webpack-dev-server --content-base src/ --inline --hot --history-api-fallback",
    "build:prod": "webpack -p &amp;&amp; xcopy \"src/server/views/index.html\" \"public/\" /F /Y"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^15.4.1",
    "react-dom": "^15.4.1",
    "react-router": "^3.0.0"
  },
  "devDependencies": {
    "babel-core": "^6.18.2",
    "babel-loader": "^6.2.8",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "babel-preset-stage-2": "^6.18.0",
    "body-parser": "^1.15.2",
    "express": "^4.14.0",
    "jquery": "^3.1.1",
    "lodash": "^4.17.2",
    "morgan": "^1.7.0",
    "pug": "^2.0.0-beta6",
    "webpack": "^1.13.3",
    "webpack-dev-server": "^1.16.2"
  }
}
</code></pre>

<p>This works. My index.html is this:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;React Basics&lt;/title&gt;
    &lt;!-- Latest compiled and minified CSS --&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="app"&gt;&lt;/div&gt;
&lt;script src="/app/main.js"&gt;&lt;/script&gt;
&lt;!--Everything will be bundled in app/mainjs --&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>When I do npm start, the application builds, and I can go to <code>localhost:8080</code> and see index.html, with the subcomponents loaded. The script loaded is 'app/main.js' which is the following:</p>

<pre><code>import React from 'react';
import { render } from 'react-dom';
import {Router, Route, browserHistory, IndexRoute} from "react-router";

//import newly created components
import {Root} from "./components/Root";
import {Home} from "./components/Home";
import {User} from "./components/User";

class App extends React.Component {


    render() {
        return (
            &lt;Router history={browserHistory}&gt;
                &lt;Route path={"/"} component={Root}&gt;
                    &lt;IndexRoute component={Home}/&gt;
                    &lt;Route path={"user/:id"} component={User}/&gt;
                    &lt;Route path={"home"} component={Home}/&gt;
                &lt;/Route&gt;
                &lt;Route path={"home"} component={Home}/&gt;
            &lt;/Router&gt;
        );
    }
}

render(&lt;App /&gt;, window.document.getElementById('app'));
</code></pre>

<p>What I want to do right now is instead of having the index.html, I want to have an index.pug with exactly the same content as index.html, and serve the pug template from the server file index.js. Can you tell me how I can do that? i tried a few things, but it messed things up too much, so reverted back to original situation.</p>