title: How do I set up webpack and babel when react app is not loading on localhost:3000
body: <p>I've followed several tutorials and none seem to work. I can configure webpack, babel, and some simple React components but they are not rendering on my localhost:3000. Any suggestions as to what I am doing wrong as there are no console logs or errors being thrown in terminal.</p>
  <p>package.json</p>
  <pre><code>{
    &quot;name&quot;: &quot;frontend&quot;,
    &quot;version&quot;: &quot;1.0.0&quot;,
    &quot;description&quot;: &quot;&quot;,
    &quot;main&quot;: &quot;index.js&quot;,
    &quot;scripts&quot;: {
      &quot;start&quot;: &quot;webpack-dev-server --mode development&quot;,
      &quot;test&quot;: &quot;echo \&quot;Error: no test specified\&quot; &amp;&amp; exit 1&quot;
    },
    &quot;keywords&quot;: [],
    &quot;author&quot;: &quot;&quot;,
    &quot;license&quot;: &quot;ISC&quot;,
    &quot;dependencies&quot;: {},
    &quot;devDependencies&quot;: {
      &quot;@babel/core&quot;: &quot;^7.11.0&quot;,
      &quot;@babel/preset-env&quot;: &quot;^7.11.0&quot;,
      &quot;@babel/preset-react&quot;: &quot;^7.10.4&quot;,
      &quot;babel-loader&quot;: &quot;^8.1.0&quot;,
      &quot;react&quot;: &quot;^16.13.1&quot;,
      &quot;react-dom&quot;: &quot;^16.13.1&quot;,
      &quot;react-hot-loader&quot;: &quot;^4.12.21&quot;,
      &quot;webpack&quot;: &quot;^4.44.1&quot;,
      &quot;webpack-cli&quot;: &quot;^3.3.12&quot;,
      &quot;webpack-dev-server&quot;: &quot;^3.11.0&quot;
    }
  }
  </code></pre>
  <p>.babelrc</p>
  <pre><code>{
    &quot;presets&quot;:
    [
      &quot;@babel/preset-env&quot;,
      &quot;@babel/preset-react&quot;
    ]
  }
  </code></pre>
  <p>webpack.config.js</p>
  <pre><code>const webpack = require('webpack');
  const path = require('path');
  
  
  module.exports = {
    devtool: 'inline-source-map',
    entry: './src/index.js',
    output: {
      path: path.resolve(__dirname, 'dist',),
      publicPath: '/',
      filename: 'bundle.js'
    },
    devServer: {
      port: 3000,
      contentBase: './dist',
      hot: true
    },
    module: {
      rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      }
      ]
    },
    resolve: {
      extensions: ['*', '.js', '.jsx']
    },
    plugins: [
      new webpack.HotModuleReplacementPlugin()
    ],
  };
  </code></pre>
  <p>index.html</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
   &lt;head&gt;
   &lt;title&gt;My React Configuration Setup&lt;/title&gt;
   &lt;/head&gt;
   &lt;body&gt;
   &lt;div id=&quot;root&quot;&gt;&lt;/div&gt;
   &lt;!-- &lt;script src=&quot;./dist/bundle.js&quot;&gt;&lt;/script&gt; --&gt;
   &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>index.js</p>
  <pre><code>import React from &quot;react&quot;;
  import ReactDOM from &quot;react-dom&quot;;
  import Welcome from './App'
  
  ReactDOM.render(&lt;Welcome /&gt;, document.getElementById(&quot;root&quot;));
  
  module.hot.accept();
  </code></pre>
  <p>App.js</p>
  <pre><code>import React from 'react';
  
  class Welcome extends React.Component {
    render() {
      return &lt;h1&gt;Hello World from React boilerplate&lt;/h1&gt;;
    }
  }
  
  export default Welcome
  </code></pre>