Javascript bundled with webpack not working

Question

So basicaly I can't get any of my javascript to work after linking bundle.js onto my index.html. Every function is undefined even tho bundle.js is being loaded and I can access it via source code in dev tools. However if I link my javascript file "app.js" directly everything works as intended. I figured there will most likely be a problem with my webpack setup since this is my first time setting it up. I'll be glad for any other tips regarding this webpack.config. Thanks in advance :)

Here is my package.json:

{
"name": "name",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --mode production",
"dev": "webpack --mode development",
"devs": "webpack-dev-server --mode development"
},
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^1.0.0",
"extract-loader": "^3.0.0",
"file-loader": "^2.0.0",
"font-awesome": "^4.7.0",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.4.4",
"node-sass": "^4.9.4",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"webpack": "^4.23.1",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10"
}
}

webpack.config.js:

const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry: {
    main: ["./src/index.js"]
},
output: {
    filename: "scripts/bundle.js",
    path: path.resolve(__dirname, "./dist")
},
module: {
    rules: [
        {
            test: /\.html$/,
            use: [
                {
                    loader: "file-loader",
                    options: {
                        name: "[name].html"
                    }
                },
                {
                    loader: "extract-loader"
                },
                {
                    loader: "html-loader",
                    options: {
                        attrs: ["img:src"]
                    }
                }
            ]
        },
        {
            test: /\.sass$/,
            use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
        },
        {
            test: /\.(jpg|gif|png)$/,
            use: [
                {
                    loader: "file-loader",
                    options: {
                        name: "images/[name].[ext]"
                    }
                }
            ]
        }
    ]
},
plugins: [
    new MiniCssExtractPlugin({
        filename: "styles/[name].css",
        chunkFilename: "[id].css"
      })
],
watch: true,
};

main webpack entry index.js:

require('./scripts/app.js');
require('./styles/sass/app.sass');
require("./index.html");

index.html script link:

<script src="./scripts/app.js"></script>

EDIT Problem is definitely within bundle.js that is being generated. If I copy the function at the begining of the bundle.js everything works as intended. Here is bundle.js code in fiddle:

https://jsfiddle.net/ustqkg7v/

If I copy the function from app.js at the beginning of the bundle.js, everything works as intented. I think there might be a problem with scope but I am not sure.

EDIT 2 I've setup smaller project with same folder structure, files, etc. Exactly the same issue. Here is link:

https://www.dropbox.com/s/9f5pf6y4fbb60dw/webpack4-test.rar?dl=0

Answer 1

The issue may be also because of this path: path.resolve(__dirname, "./dist") .I am assuming the webpack.config.js is at the root level of the project so I think it has to be path: path.resolve(__dirname, "dist")

Then in html it need to be referred from dist folder

<script src="./dist/app.js"></script>

Before this check if app.js is getting generated in dist folder

Answer 2

on your 'webpack.config.js' file add:

devServer: 
{
     contentBase: path.resolve(__dirname, 'dist'),
     writeToDisk: true,
}