Сборка webpack и плагины cdn на разных страницах?

Question

[oldeuboi]

Привет! Есть сайт-многостраничник, на каждой странице которого подключается определенный для этой страницы js-файл (скрипт), а также соответствующий js-плагин (типа swiper, lightgallery и т.д.), который используется только на этой странице и подгружается через cdn. Например, на странице home.html подключается home.js (физический файл) и swiper.js (через cdn); на странице products.html - products.js (физический файл) и lightgallery.js (через cdn) и т.д. на остальных страницах.

Так вот, все эти физические файлы типа home.js и products.js я с помощью webpack-а объединил в один bundle.js, который теперь подключаю на всех страницах, будь то home.html или products.html. Однако те, плагины, которые подключаются через cdn, так и остаются на соответствующих страницах. Вроде всё работает, но в консоли браузера выходят ошибки типа "Uncaught ReferenceError: Swiper is not defined", когда находишься на той странице, где, к примеру, плагин swiper.js (подключаемый через cdn) отсутствует.

Подскажите, что нужно сделать чтобы при сборке webpack-ом те js-плагины, которые подключаются через cdn на конкретных страницах учитывались и не было этих ошибок в консоли?

Answer 1

[Anthony]

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',
                },
            ],
        }),
    ],
}