Webpack build and cdn plugins on different pages?

Question

JavaScript

Hey! There is a multi-page site, on each page of which a js file (script) specific to this page is connected, as well as the corresponding js plugin (such as swiper, lightgallery, etc.), which is used only on this page and is loaded via cdn. For example, on the home.html page, home.js (a physical file) and swiper.js (via cdn) are included; in the products.html page - products.js (physical file) and lightgallery.js (via cdn), etc. on the rest of the pages.

So, with the help of webpack, I combined all these physical files like home.js and products.js into one bundle.js, which I now include on all pages, be it home.html or products.html. However, those plug-ins that are connected via cdn remain on the corresponding pages. Everything seems to be working, but errors like "Uncaught ReferenceError: Swiper is not defined" appear in the browser console when you are on the page where, for example, the swiper.js plugin (connected via cdn) is missing.

Tell me, what needs to be done so that when building with webpack, those js plugins that are connected via cdn on specific pages are taken into account and there are no these errors in the console?

Answer 1

module.exports = {


externals: {
        jquery: 'jQuery',
        swiper: 'Swiper'
},

plugins: [
        new webpack.ProvidePlugin({
      'window.jQuery': 'jquery',
      'window.$': 'jquery',
      jQuery: 'jquery',
      $: 'jquery',
                        'window.Swiper': 'swiper',
      Swiper: 'swiper',
    }),
        new HtmlWebpackPlugin({}),  // manage your HTML file
        
        new HtmlWebpackExternalsPlugin({ // optional plugin: inject cdn
            externals: [
                {
                    module: 'jquery',
                    entry: 'https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js',
                    global: 'jQuery',
                },
                {
                    module: 'swiper',
                    entry: 'https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.6/js/swiper.js',
                    global: 'Swiper',
                },
            ],
        }),
    ],
}