webpack-dev-server 404 & how to set it up correctly?
<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>