title: webpack bundles files but index.js isn't running
body: <p>I have an index.js file that imports my CSS and a few packages, but after bundling everything and starting the server I noticed that index.js wasn't running. I did a simple <code>console.log</code> in index.js and it isn't reached.</p>
  
  <p>I copied the contents of my <code>webpack.config</code> file from a previous project which was working correctly, so I'm not sure if it's a file structure/path error or what not. Any thoughts?</p>
  
  <h3>Directory structure:</h3>
  
  <p><a href="https://i.stack.imgur.com/1yGjd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1yGjd.png" alt="enter image description here"></a></p>
  
  <h3>webpack.config.js:</h3>
  
  <pre><code>const path = require('path')
  const webpack = require('webpack');
  const HtmlWebpackPlugin = require('html-webpack-plugin')
  var $ = require("jquery");
  
  var HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'RecruitmentTracking.txt',
      inject: 'body'
  });
  
  module.exports = {
    entry: "./src/index.js", // removing the . fails the build
    output: {
      filename: './SiteAssets/scripts/RecruitmentTracking.js',
      path: path.resolve(__dirname, 'dist')
    },
  
    module: {
      rules: [{
        loader: 'babel-loader',
        test: /\.js$/,
        exclude: /node_modules/
      }, {
          test: /\.css$/,
          use: ['style-loader', 'css-loader']
      }, {
          test: /\.(png|svg|jpg|gif)$/,
          use: [
            'file-loader'
          ]
        }
      ],
    },
      devServer: {
          disableHostCheck: true
      },
      devtool: 'cheap-module-eval-source-map', // this helps the browser point to the exact file in the console, helps in debug
      devServer: {
          contentBase: path.join(__dirname, 'src'),
          historyApiFallback: true // this prevents the default browser full page refresh on form submission and link change
      },
      plugins: [
          HtmlWebpackPluginConfig,
          new webpack.ProvidePlugin({
              "$": "jquery",
              "jQuery": "jquery",
              "window.jQuery": "jquery"
      })]
  }
  </code></pre>
  
  <h3>index.js:</h3>
  
  <pre><code>import "./RecruitmentTracking.css";
  import 'jquery';
  import 'bootstrap/dist/js/bootstrap.bundle.min.js';
  import 'jquery-ui-bundle/jquery-ui.min.js';
  
  console.log('this is index.js');
  </code></pre>
  
  <h3>package.json:</h3>
  
  <pre><code>{
    "name": "recruitmenttracking",
    "version": "1.0.0",
    "description": "Recruitment Initiatives Tracking",
    "main": "index.js", // ----- should a more specific file path be here?
    "scripts": {
      "test": "echo \"Error: no test specified\" &amp;&amp; exit 1",
      "start": "webpack-dev-server --open --mode development",
      "build": "webpack --config webpack.config.js",
      "dev-server": "webpack-dev-server"
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "@babel/cli": "^7.2.3",
      "@babel/core": "^7.4.0",
      "@babel/preset-env": "^7.4.2",
      "babel-loader": "^8.0.5",
      "css-loader": "^2.1.1",
      "file-loader": "^3.0.1",
      "html-webpack-plugin": "^3.2.0",
      "style-loader": "^0.23.1",
      "webpack": "^4.29.6",
      "webpack-cli": "^3.3.0",
      "webpack-dev-server": "^3.2.1"
    },
    "dependencies": {
      "@babel/polyfill": "^7.4.0",
      "axios": "^0.18.0",
      "bootstrap": "^4.3.1",
      "jquery": "^3.3.1",
      "jquery-ui-bundle": "^1.12.1-migrate",
      "pdfmake": "^0.1.54",
      "popper": "^1.0.1"
    }
  }
  </code></pre>