title: Webpack dev server cannot load nested urls (GET 404 error)
body: <p>I'm currently setting up a site that uses a webpack-dev-server and a backbone router.</p>
  
  <p>Until today, everything seemed to be working (for example I could go to <code>http://localhost:3333</code> for my home page and <code>http://localhost:3333/login</code> for my login page.</p>
  
  <p>But today I tried to go to my first nested url, <code>http://localhost:3333/people/1</code>, and my console throw a 404 GET error.</p>
  
  <p>The exact error was this:
  <code>http://localhost:3333/people/build/bundle.js 404 (Not Found)</code></p>
  
  <p>It seems that my webpack server is trying to look for the correct files to server under the wrong directory. If this is correct, I have no idea how to fix this. I've looked at other stack overflow questions and github issues, but to no avail. Any thoughts?</p>
  
  <p>I start the server using gulp. Here is my gulpfile:</p>
  
  <pre><code>var gulp = require("gulp");
  var webpack = require("webpack");
  var server = require("webpack-dev-server");
  var config = require("./webpack.config");
  
  gulp.task("serve", function() {
    new server(webpack(config), {
      publicPath: config.output.publicPath,
      historyApiFallback: true,
      hot: true,
      quiet: false,
      stats: { colors: true, progress: true },
    }).listen(3333, "localhost", function (err, result) {
      if (err) {
        console.log(err);
      } else {
        console.log("Listening at localhost:3333!");
      }
    });
  });
  
  gulp.task("default", ["serve"]);
  </code></pre>
  
  <p>Here is my webpack config file:</p>
  
  <pre><code>var webpack = require("webpack");
  
  module.exports = {
    entry: [
      __dirname + "/app/app.js",
      "webpack/hot/dev-server",
      "webpack-dev-server/client?http://localhost:3333/",
    ],
    output: {
      path: __dirname + "/build",
      filename: "bundle.js",
      publicPath: "http://localhost:3333/",
    },
    plugins: [
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NoErrorsPlugin()
    ],
    module: {
      loaders: [
        { test: /\.jsx$/, exclude: /node_modules/, loader: "react-hot-loader!babel-loader" },
        { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" },
        { test: /\.scss$/, exclude: /node_modules/, loader: "style!css!sass" },
      ]
    },
    resolve: {
      root: __dirname,
      extensions: ["", ".js", ".jsx"],
    },
  }
  </code></pre>
  
  <p>Edit: I've just found that I can directly hit the urls <code>http://localhost:3333/#/people/1</code> or <code>http://localhost:3333/#people/1</code> and everything works as expected.</p>
  
  <p>Is there a setup that will allow me to not have to include the pound symbol in the url? Hope this helps give more context to my question.</p>
  
  <p>Follow up: I have a global <code>App</code> component that initializes a backbone router and calls <code>Backbone.history.start({ pushState: true })</code>. Here's a code snippet.</p>
  
  <pre><code>class App {
  
    constructor() {
      console.log("starting up");
      this.Router = new Router();
      Backbone.history.start({ pushState: true });
    }
  }
  
  module.exports = new App();
  </code></pre>
  
  <p>If you notice the <code>console.log</code> in the constructor, this is called on non-nested pages that can render but not on nested pages that cannot.</p>