Webpack Error Reading/Resolving the Entry Module

Question

I'm receiving an error when trying to execute a watch command on webpack and cannot figure out the problem. I have a feeling there's more than one issue, but I'm pretty sure I at least have an idea of one of the problems.

To give a little background, I'm way out of my know-how with all of this and am trying to self-teach how to write a web application with python. I stumbled onto this blog post with a basic example with detailed instructions:

https://codeburst.io/creating-a-full-stack-web-application-with-python-npm-webpack-and-react-8925800503d9

... and getting errors with no context from the source material. They also have a github and youtube video where it was presented, but still no such luck.

I think part of the issue is that their example was written on a MAC which the directory works a little different than windows which is my computer, so in part of the code the directory appears to be off because of that. Here's a screenshot showing the Node.js, the file folder, and the webpack.config.js code:

Here's a screenshot showing the Node.js, the file folder, and the webpack.config.js code:

I noticed that the directory in the example had had '/static/js/index.jsx', but my directory uses the other slash \static\js\index.jsx and the error shows the odd combining as C:\Users...\static/static/js/index.jsx. After learning that \ was an escape code in javascript, I eventually tried the code re-done with the changed slashes.

Here's another screenshot showing the newly run effect ... and it didn't appear to have an effect.

So I'm not sure if what I "fixed" was also an error, but not the current one since it doesn't make sense to me how directory slashes can change... but still no real answers and my knowledge on this was too thin to effectively look it up or learn the nature of the issue.

I have a feeling the actual module either is or may also have some kind of error in the webpack code, but I'm not too sure.

Thanks for any and all time on helping me out, Matt

Edit: the original post had screenshots of the code and reference to the source material it was copied from, but for reference here are the code segments:

The directory layout is:

| Documents
|--- Python Scripts
    |--- fullstacktemplate
        |---  fullstack_template
            |--- static
                |--- js
                    |--- index.jsx
                | node_modules
                | index.html
                | package.json
                | package-lock.json
                | webpack.config.js

The node_modules and package-lock.json were auto-created with set up of NPM, Webpack, and/or Babel. Package.json was further edited which will be listed below.

index.jsx is 1 line:

alert("Hello World!");

package.json is as follows:

{
  "name": "fullstacktemplate",
  "version": "1.0.0",
  "description": "fullstack template that will say hello in another language when activated",
  "main": "index.jsx",

  "scripts": {
    "build": "webpack -p --progress --config webpack.config.js",
    "dev-build": "webpack --progress -d --config webpack.config.js",
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "webpack --progress -d --config webpack.config.js --watch"
    },

  "keywords": [
    "python",
    "react",
    "npm",
    "webpack"
    ],

  "author": "Matt Lane",
  "license": "ISC",

  "devDependencies": {
    "webpack": "^4.28.2"
    }
}

webpack.config.js is as follows:

const webpack = require('webpack');
const config = {
    entry:  __dirname + '\\js\\index.jsx',
    output: {
        path: __dirname + '\\dist',
        filename: 'bundle.js',
    },
    resolve: {
        extensions: ['.js', '.jsx', '.css']
    },
    module: {
        rules: [
        {
          test: /\.jsx?/,
                exclude: /node_modules/,
                use: 'babel-loader'
          }
        ]
    }
};

module.exports = config;

The webpack.config.js file is my "corrected" one with the \ slashes. The original unedited version was:

const webpack = require('webpack');
const config = {
    entry:  __dirname + '/js/index.jsx',
    output: {
        path: __dirname + '/dist',
        filename: 'bundle.js',
    },
    resolve: {
        extensions: ['.js', '.jsx', '.css']
    },
    module: {
        rules: [
        {
          test: /\.jsx?/,
                exclude: /node_modules/,
                use: 'babel-loader'
          }
        ]
    }
};

module.exports = config;