title: webpack-dev-server 404 & how to set it up correctly?
body: <h3>Where I'm coming from</h3>
  
  <p>I've been working with webpack for quite a while now but this is the first time I'm not modifying a starter kit for it, trying to set up everything from ground up.</p>
  
  <p>I followed along <a href="http://survivejs.com/webpack/introduction/" rel="nofollow noreferrer">this nice article on survivejs.com</a> and inherited some of the approaches described there combining them with some of my earlier setups (like setting different names and paths depending on a production variable sent).</p>
  
  <p>I tried to run "build" and "start" as much as possible during the lecture as to not get caught by some unexpected behaviour that I wouldn't be able to track back. This worked fine.</p>
  
  <p>Then at some point while fiddling with the chapter about <a href="http://survivejs.com/webpack/building-with-webpack/eliminating-unused-css/" rel="nofollow noreferrer">excluding unused css from third party frameworks</a> <strong>I somehow broke my dev server setup</strong>. <em>(<code>"run build"</code> still works!)</em>
  <br>
  <br></p>
  
  <h1>THE ISSUE</h1>
  
  <p>My hot server is defined at 192.168.1.2:3000 (that's just how I want it).
  When I run <code>webpack-dev-server</code> with the settings shown further below I get a <strong>404 ( Cannot GET / )</strong> at that location.
  Now I've read <strong>a lot</strong> about how to set up webpack dev server correctly but I still don't get it right...(most probably not alone here...) due to the fact that I still not fully understand how the paths work.</p>
  
  <h3>This is my understanding (generic dev server setup):</h3>
  
  <p><em>(Please help me if I'm wrong on any of this)</em></p>
  
  <ul>
  <li>The output path of my <code>webpack.config.js</code> will only be served in the memory while running the dev server, thus not being physically visible (If the output was <code>path: path.join(__dirname, 'devServerFolder'</code> for example I would never see that folder anywhere in my project structure if it wasn't for me creating it)</li>
  <li>A static <code>index.html</code> pointing to my <code>bundle.js</code> would be needed in a folder where I point to with <code>publicPath</code> as well as with <code>contentBase</code> (which could be my <code>devServerFolder</code> which I'd need to create with that <code>index.html</code> in it; usually in most setups around the web the same <code>public</code> folder used to save the production build in)</li>
  <li>If I use <code>html-webpack-plugin</code> the plugin will generate that file for me automatically without the need to point to anything because the bundle.js gets written into it by the plugin</li>
  </ul>
  
  <p>These are some of the points that really bother me to understand well. I have tried <a href="https://stackoverflow.com/questions/31886732/cannot-get-hotmodulereplace-plugin-with-react-hot-to-be-enabled-in-the-browser">lots</a> . <a href="https://github.com/webpack/docs/wiki/webpack-dev-server#content-base" rel="nofollow noreferrer">of</a> . <a href="https://stackoverflow.com/questions/36864147/cant-make-react-hot-loader-and-webpack-dev-server-work-with-react-router">different</a> . <a href="https://stackoverflow.com/questions/28923313/webpack-dev-server-react-router-push-state">combinations</a> playing around with the <code>publicPath</code> and <code>contentBase</code> settings without luck to re-establish my dev server (worked fine first).
  <em>Please take note that I'm not having any problems with code or with compiling my build with <code>run build</code>, which works fine and just like it should.</em>
  <br>
  <br></p>
  
  <h1>CONFIGS</h1>
  
  <h3>Folder Structure</h3>
  
  <pre><code>webpack.test
  |
  | - app                    // App folder
       |
       | - index.js          // Entry point
       | - greet.js          // Hello World called by index.js
       | - sass              // Sass assets folder
       | - pug               // Pug (formerly jade) template and assets folder
  | - node_modules
  | - public                 // Production output folder
  | - webpack-config-chunks  // Split up webpack configs folder
  | - .babelrc 
  | - package.json
  | - webpack.config.js
  </code></pre>
  
  <p><br></p>
  
  <h3>Webpack.config.js</h3>
  
  <pre><code>// Irrelevant parts omitted
  
  const paths: {
    app:   path.join(__dirname, 'app'),    // The obvious one
    dev:   path.join(__dirname, 'bin'),
    /* As mentioned above, from my understanding,
       the output path for the dev server doesn't really matter at all
       when using html-webpack-plugin, am I wrong here? */
    build: path.join(__dirname, 'public')  // Another obvious one
    ...
  };
  
  ...
  entry: {
    app: production ? paths.app : [
      'webpack-dev-server/client?192.168.1.2:3000',
      'webpack/hot/only-dev-server',
       paths.app
    ]
    /* I can modify the entry to just be paths.app for every case
       but it won't change a thing regarding my problem. */
  },
  
  output: {
    path: production ? paths.build : paths.dev,
    publicPath: production ? '' : paths.dev + '/',
    /* ^ This is where I've tried just '' or paths.app or paths.build
         instead of paths.dev and delete publicPath all together. */
    filename: production ? '[name].[chunkhash].js' : '[name].js',
    chunkFilename: '[chunkhash].js'
  },
  
  devServer: {
    contentBase: paths.dev,
    /* ^ This = "webpack.test/bin" – See above.
         Tried several different paths here as well without luck. */
    hot: true,
    inline: true,
    stats: 'minimal',
    compress: true,
    host: '192.168.1.2',
    port: '3000',
  },
  
  plugins: [
    new HtmlWebpackPlugin(),
    new webpack.HotModuleReplacementPlugin(){
      multiStep: true
    }
  ]
  ...
  </code></pre>