Tomcat deployed war and Webpack code splitting
<p>I'm using Webpack 2.1.0-beta.20 with multiple entry points and code splitting.  </p>

<p>The split points are using ES6 style <code>System.import()</code> and fire based on the application's routing.  This works perfectly on the Webpack dev server and on a Spring Boot embedded Tomcat launched with <code>gradle bootRun</code>.  The problem surfaces when packaging to a war and deploying manually on Tomcat.  In this case the static entry points are loaded as expected.  These are the ones injected into the <code>index.html</code> by Webpack.  But the browser shows no attempt to retrieve the "load on demand" chunks.  Result is no React application is resolved into the div.</p>

<p><code>&lt;div&gt; &lt;!-- react-empty: 1 --&gt;</code></p>

<p>I think the problem is that the Tomcat deployment uses the name of the war as the application name in the URL.  The other run configurations do not.</p>

<p><a href="http://localhost:8080/" rel="nofollow">http://localhost:8080/</a> vs. <a href="http://localhost:8080/app-name" rel="nofollow">http://localhost:8080/app-name</a></p>

<p>It is not a failure to locate any resource.  I can pull up the first chunk bundle on the URL.  It's like Webpack makes no effort load it.  I've tried many variations on <code>path</code> and <code>publicPath</code>.  Also tried <code>__webpack_public_path__</code>.  But it doesn't seem like a problem with locating.  Instead for some reason Webpack isn't trying to load the chunk at all.</p>

<p>Thanks for any suggestions.</p>

<p>webpack.config.js</p>

<pre class="lang-js prettyprint-override"><code>const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')

const PATHS = {
  app: './app/index.js',
  html: './app/index.html',
  src: path.resolve(__dirname, 'app'),
  dist: path.resolve(__dirname, 'dist'),
  routes: path.resolve(__dirname, 'app/routes')
}

const DEV_PORT = '4000'
const SSL_PORT = '8543'
const HOST = '127.0.0.1'

const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
  template: PATHS.html,
  filename: 'index.html',
  inject: 'body'
})

module.exports = env =&gt; {
  return {
    entry: {
      hmr: getHmrEntry(),
      js: PATHS.app,
      route: PATHS.routes + '/routes.js',
      vendor: [
        'react',
        'react-router',
        'react-dom',
        'babel-polyfill'
      ]
    },

    output: {
      filename: '[name].bundle.js',
      chunkFilename: '[id].bundle.js',
      path: PATHS.dist,
      publicPath: getPublicPath()
    },

    context: __dirname,

    resolve: {
      modules: [path.resolve(__dirname, '.'), 'node_modules']
    },

    devtool: env.prod ? 'eval' : 'inline-source-map',

    bail: env.prod,

    externals: {
      'cheerio': 'window',
      'react/lib/ExecutionEnvironment': true,
      'react/lib/ReactContext': true
    },

    module: {
      loaders: [
        {
          test: /(\.js|\.jsx)$/,
          exclude: /node_modules/,
          loaders: ['react-hot', 'babel?presets[]=react,presets[]=es2015,presets[]=stage-2', 'eslint']
        },
        {
          test: /\.css$/,
          loader: ExtractTextPlugin.extract({
            fallbackLoader: 'style-loader',
            loader: ['css']
          })
        }
      ]
    },

    plugins: [
      HtmlWebpackPluginConfig,

      new webpack.optimize.CommonsChunkPlugin({
        name: 'vendor',
        minChunks: Infinity,
        filename: 'vendor.bundle.js'
      }),

      new ExtractTextPlugin({
        filename: '[name].[id].style.css',
        allChunks: false
      })
    ],

    devServer: {
      contentBase: PATHS.dist,
      port: DEV_PORT,
      historyApiFallback: true
    }
  }

  function getPublicPath () {
    // var prodPath = 'https://' + HOST + ':' + SSL_PORT + '/react-app/'
    var prodPath = '/react-app/'
    // var devPath = 'http://' + HOST + ':' + PORT + '/dist/'
    var devPath = '/dist/'
    var publicPath

    if (env.prod) {
      publicPath = prodPath
    } else {
      publicPath = devPath
    }
    return publicPath
  }

  function getHmrEntry () {
    var hmr = []
    if (!env.prod) {
      hmr = [
        'webpack-dev-server/client?http://' + HOST + ':' + DEV_PORT,
        'webpack/hot/only-dev-server'
      ]
    }
    return hmr
  }
}
</code></pre>

<p>index.js</p>

<pre class="lang-js prettyprint-override"><code>import 'babel-polyfill'
import React from 'react'
import { render } from 'react-dom'
import { Router, browserHistory } from 'react-router/es6'
import rootRoute from './routes/routes'
import '../style/common.css'
// __webpack_public_path__ = window.resourceBaseUrl + '/react-app/'

render(
  &lt;Router history={browserHistory} routes={rootRoute} /&gt;,
  document.getElementById('root')
)
</code></pre>

<p>routes.js</p>

<pre class="lang-js prettyprint-override"><code>import App from '../containers/App'

function errorLoading (err) {
  console.error('Dynamic page loading failed', err)
}

function loadRoute (cb) {
  return (module) =&gt; cb(null, module.default)
}

export default {
  component: App,
  childRoutes: [
    {
      path: '/',
      getComponent (location, cb) {
        System.import('./Home')
          .then(loadRoute(cb))
          .catch(errorLoading)
      }
    },
    {
      path: 'about',
      getComponent (location, cb) {
        System.import('./About')
          .then(loadRoute(cb))
          .catch(errorLoading)
      }
    },
    {
      path: 'feature',
      getComponent (location, cb) {
        System.import('./Feature')
          .then(loadRoute(cb))
          .catch(errorLoading)
      }
    }
  ]
}
</code></pre>