I'm trying out Webpack for the first time on one of my old website. The website has JQuery installed via CDN.

On one of my js file, I need to have Fancybox js plugin so I import as below

import { fancybox } from "@fancyapps/fancybox";
import "@fancyapps/fancybox/dist/jquery.fancybox.min.css";

I executed "npm run dev" and webpack gave me error "Can't resolve "jquery". So I have to include Jquery as a plugin in my webpack.config.js as follow

plugins: [
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        "window.jQuery": "jquery",
    }),
],

Execute "npm run dev" again and it works as expected. My question is how to avoid duplicate jquery loading since the website template already include JQuery via CDN and now my webpack output file also include JQuery? I tried to remove the Jquery CDN but then it caused my other js files to break. Thanks.