How to setup jQuery in Webpack and use in a .cshtml file?

Below, you can find the text related to the question/problem. In the video, the question will be presented first, followed by the answers. If the video moves too fast, feel free to pause and review the answers. If you need more detailed information, you can find the necessary sources and links at the bottom of this description. I hope this video has been helpful, and even if it doesn't directly solve your problem, it will guide you to the source of the solution. I'd appreciate it if you like the video and subscribe to my channel!How to setup jQuery in Webpack and use in a .cshtml file?

I am working on setting up webpack in an ASP.NET Core MVC app. After installing jQuery as a dependency, I am getting an error everywhere I am trying to use jQuery:

Uncaught ReferenceError: $ is not defined

Uncaught ReferenceError: $ is not defined
head
/head

head
/head

// JS Dependencies: Popper, Bootstrap & JQuery
import 'bootstrap';
import 'jquery';
import 'jquery-validation';
import 'jquery-validation-unobtrusive';

// CSS Dependencies: Bootstrap & Bootstrap icons

// JS Dependencies: Popper, Bootstrap & JQuery
import 'bootstrap';
import 'jquery';
import 'jquery-validation';
import 'jquery-validation-unobtrusive';

// CSS Dependencies: Bootstrap & Bootstrap icons

{
"name": "TestProject",
"version": "1.0.0",
"description": "",
"author": "",
"license": "ISC",
"dependencies": {
"bootstrap": "^5.3.3",
"bootstrap-icons": "^1.11.3",
"jquery": "^3.7.1",
"jquery-validation": "^1.21.0",
"jquery-validation-unobtrusive": "^4.0.0"
},
"devDependencies": {
"css-loader": "^7.1.2",
"eslint": "^9.5.0",
"expose-loader": "^5.0.0",
"mini-css-extract-plugin": "^2.9.1",
"style-loader": "^4.0.0",
"url-loader": "^4.1.1",
"webpack": "^5.93.0",
"webpack-cli": "^5.1.4"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
}
}

{
"name": "TestProject",
"version": "1.0.0",
"description": "",
"author": "",
"license": "ISC",
"dependencies": {
"bootstrap": "^5.3.3",
"bootstrap-icons": "^1.11.3",
"jquery": "^3.7.1",
"jquery-validation": "^1.21.0",
"jquery-validation-unobtrusive": "^4.0.0"
},
"devDependencies": {
"css-loader": "^7.1.2",
"eslint": "^9.5.0",
"expose-loader": "^5.0.0",
"mini-css-extract-plugin": "^2.9.1",
"style-loader": "^4.0.0",
"url-loader": "^4.1.1",
"webpack": "^5.93.0",
"webpack-cli": "^5.1.4"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
}
}

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const webpack = require('webpack');

entry: {
},
output: {
clean: true
},
Source of the question:

Question and source license information: