Using webpack-manifest-plugin getting the error 'Uncaught SyntaxError: Unexpected token <'
<p>I've found <a href="https://www.npmjs.com/package/webpack-manifest-plugin" rel="nofollow">webpack-manifest-plugin</a> yesterday and started using it following <a href="http://madole.xyz/asset-hashing-with-webpack/" rel="nofollow">this tutorial.</a></p>

<p>When I open my app on browser it shows <code>Uncaught SyntaxError: Unexpected token &lt;</code>. The app is loading with the correct hash. The error is pointing to <code>&lt;!DOCTYPE html&gt;</code>.</p>

<p>The following is my webpack configuration:</p>

<pre><code>'use strict'

var webpack = require('webpack');
var path = require('path');
var extractTextWebpackPlugin = require('extract-text-webpack-plugin');
var webpackManifestPlugin = require('webpack-manifest-plugin');
var autoprefixer = require('autoprefixer');

module.exports = {
    devtool: 'cheap-module-eval-source-map',
entry: [
    './modules/index.js'
],
output: {
    path: path.join(__dirname, 'public/build'),
    filename: 'bundle.[hash].js'
},
module: {
    noParse: [
        /aws\-sdk/,
    ],
    loaders: [{
            test: /\.css$/,
            include: [path.resolve(__dirname)],
            loader: extractTextWebpackPlugin.extract('style-loader', 'css-loader!postcss-loader')
        },

        {
            test: /\.js$/,
            exclude: /node_modules/,
            include: __dirname,
            loaders: ['babel']
        },

        {
            test: /\.(png|jpg|jpeg|gif)$/,
            loader: 'url-loader?limit=10000&amp;name=images/[name].[ext]',
            include: [
                path.resolve(__dirname)
            ]
        },

        {
            test: /\.(svg|eot|woff|woff2|ttf)$/,
            loader: 'url-loader?limit=10000&amp;name=fonts/[name].[ext]',
            include: [
                path.resolve(__dirname)
            ]
        }
    ]
},
plugins: [
    new extractTextWebpackPlugin("style.css"),
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery"
    }),

    new webpackManifestPlugin()

],

postcss() {
    return [ autoprefixer({
    browsers: ['last 10 versions']
  })
];
}
}
</code></pre>

<p>The following is my <code>manifest.json</code> output:</p>

<pre><code>{
  "fonts/glyphicons-halflings-regular.eot": "fonts/glyphicons-halflings-regular.eot",
  "fonts/glyphicons-halflings-regular.svg": "fonts/glyphicons-halflings-regular.svg",
  "fonts/glyphicons-halflings-regular.ttf": "fonts/glyphicons-halflings-regular.ttf",
  "fonts/glyphicons-halflings-regular.woff": "fonts/glyphicons-halflings-regular.woff",
  "fonts/glyphicons-halflings-regular.woff2": "fonts/glyphicons-halflings-regular.woff2",
  "main.css": "style.css",
  "main.js": "bundle.7116359824fc577b65b9.js"
</code></pre>

<p>}</p>

<p>The following is my <code>app.js</code> file:</p>

<pre><code>'use strict'

import express from 'express'
import path from 'path'
import favicon from 'serve-favicon'
import { readFileSync } from 'jsonfile'

// path for manifest json file
const manifestPath = `${process.cwd()}/public/build/manifest.json`

//read the manifest.json file
const manifest = readFileSync(manifestPath);

// js and css bundle maping to objects
const jsBundle = manifest['main.js'];


//import axios from 'axios'
//import store from './modules/store'

const app = express()

// view engine setup
app.set('views', path.join(__dirname, 'views'))
app.set('view engine', 'jade')

// config static dir
app.use(favicon(path.join(__dirname, 'public', 'images/favicon.ico')))
app.use(express.static(path.join(__dirname, 'public')))

// route handler
app.get('*', function (req, res) {
  res.render('index', { title: 'Platform', jsBundle})
})

export default app
</code></pre>

<p>And finally this <code>index.jade</code>:</p>

<pre><code>doctype html
html(lang='en')
  head
    meta(charset='utf-8')
    meta(http-equiv='X-UA-Compatible', content='IE=edge')
    meta(name='viewport', content='width=device-width, initial-scale=1')
    title= title
    meta(name='description', content='')
    link(rel='stylesheet', href='/build/style.css')
body
    #app
    script(src=jsBundle)
    script(async,src='https://maps.googleapis.com/maps/api/js?key=AIzaSyBp0nIBIEWDsSp2lagOzOX4zdPEanFaDM8&amp;libraries=drawing,places&amp;callback=mapsLoaded')
</code></pre>