title: React App running on Node/Express not rendering after transpile with Webpack.
body: <p>I am trying to serve my React app on top of Node/Express after transpiling with Webpack. I've used create-react-app, but want learn to build from scratch so am new to using Node/Express/Webpack. After going through various tutorials, I am stuck trying to render React elements after transpiling with Webpack (Only HTML is being served).</p>
  
  <p>I also run the following commands to create my bundle.js file and navigate to localhost:3000</p>
  
  <p>-npm run webpack</p>
  
  <p>-node server.js</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;title&gt;React App&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="root"&gt;&lt;/div&gt;
      &lt;h1&gt;This is from the HTML file&lt;/h1&gt;
      &lt;script scr="bundle.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My webpack.config.js is currently...</p>
  
  <pre><code>var webpack = require('webpack')
  var path = require('path') 
  
  module.exports = {
    entry: [
      './src'
    ],
    output: {
      path: path.join(__dirname, 'public'),
      filename: 'bundle.js'
    },
    module: { 
      loaders: [{
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: { 
          presets: ['react', 'es2015']
        }
      }]
    },
    plugins: [
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NoEmitOnErrorsPlugin()
    ]
  }
  </code></pre>
  
  <p>My server.js file is as follows...</p>
  
  <pre><code>var express = require('express')
  var path = require('path')
  var fs = require('fs')
  
  var app = express()
  
  var PORT = process.env.PORT || 3000
  
  app.set('view engine', 'html')
  
  app.engine('html', function(path, options, callbacks) {
    fs.readFile(path, 'utf-B', callback)
  })
  
  app.use(express.static(path.join(__dirname, 'public')))
  
  app.get('*', function(req, res) {
    res.sendFile(path.join(__dirname, 'public'), 'index.html')
  })
  
  app.use(function (err, req, res, next) {
    res.status(err.status || 500)
  })
  
  app.listen(PORT, function() {
    console.log('Server running on localhost:' + PORT)
  })
  </code></pre>
  
  <p>And my App.js only contains the follow React elements:</p>
  
  <pre><code>import React, { Component } from 'react'
  
  class App extends Component {
  
    render() {
      return (
        &lt;div&gt;
          &lt;h1&gt;This is the main App&lt;/h1&gt;
        &lt;/div&gt;
      )
    }
  }
  
  export default App
  </code></pre>
  
  <p>Also, my package.json</p>
  
  <pre><code>{
    "name": "poke-mean",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "start": "NODE_PATH=$NODE_PATH:./src node server",
      "dev": "npm start &amp; webpack-dev-server --progress --colors",
      "webpack": "webpack"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "dependencies": {
      "express": "^4.15.3",
      "react": "^15.5.4",
      "react-dom": "^15.5.4",
      "react-router-dom": "^4.1.1"
    },
    "devDependencies": {
      "babel-core": "^6.24.1",
      "babel-loader": "^7.0.0",
      "babel-preset-es2015": "^6.24.1",
      "babel-preset-react": "^6.24.1",
      "webpack": "^2.6.1",
      "webpack-dev-server": "^2.4.5"
    }
  }
  </code></pre>