'Webpack implementation

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.

Solution 1:^[1]

I found the solution to my issue. Adding it here for anyone who has similar issue in the future. Instead of importing jquery into webpack, I set webpack config to use external jquery as follow

externals: {
    jquery: "jQuery",
},

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	user16484677

'Webpack implementation

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]