At the outset, please consider this as knowledge-hunting of a (still) self-learning person. On the 2nd day of learning Webpack, I'm configuring a new project's Dev setup with Gulp, Babel and Webpack 5. In the setup, Gulp+Babel part is fine and hence omitted. I seek your guidance in Gulp+Webpack setup as whether I'm doing it correct or not along with two quick queries at the end.

My webpack.config.js:

const path = require("path"),
  webpack = require("webpack");
module.exports = {
  entry: { ... },
  output: { ... },
  plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
    }),
  ],
  module: { ... },
};

My gulpfile.js

const { dest, parallel, series, src, lastRun, watch } = require("gulp"),
  ...
  webpack = require("webpack-stream"),
  webpackConfig = require("./webpack.config.js");
...
function fWebpackBundling() {
  return src(["./readyBabel/babel.js"], { allowEmpty: true })
    .pipe( webpack( webpackConfig ) )
    .pipe(dest("dist/").on("finish", livereload.reload));
}
...
function watchFiles() {
  watch("./_source/scripts/bl*.js", fCompileBabel);
  watch("./readyBabel/babel.js", fWebpackBundling);
}
function setupServer() {
  livereload.listen(function () {
    console.log(">> Server has been established. Let's Code...");
  });
}
exports.default = series(
  fCompileBabel,
  fWebpackBundling,
  parallel(setupServer, watchFiles)
);

AND lastly, my app.js

const $ = require("jquery");
$("h1.pt-div").css({ paddingTop: navheight => $("nav").outerHeight() });

Now here are only two quick questions from you experts:

1. Though it produces no errors in the Console implying that jQuery is working fine, Could you please confirm if I've managed it correctly?
2. my biggest confusion, it works all the same without mentioning PLUGIN ProvidePlugin in the webpack.config.js file too! So the confusion is - what difference does this make? Any benefits or anything?

Kindly help.