How to import jQuery plugin when using webpack, but load jQuery from CDN?

Question

JavaScript

In general, I want to use the jQuery plugin, but since I'm going to use the final js file in wordpress, I want to load jQuery itself from the CDN.
I have this webpack config:

spoiler

module.exports = {
    mode: 'development',
    entry: './src/js/entry.js',
    output: {
        filename: 'index.js',
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /(node_modules)/,
                loader: 'babel-loader',
                query: {
                    presets: [
                        ['env', {modules: false}],
                    ],
                },
            },
        ],
    },
    devtool: 'source-map'<code></code>
};

And this js, in which I simply import the jQuery plugin:

spoiler

import './vendor/magnific-popup';

But in this case, webpack, as expected, swears:

spoiler

ERROR in ./src/js/vendor/magnific-popup.js
Module not found: Error: Can't resolve 'jquery' in '...\src\js\vendor'
 @ ./src/js/vendor/magnific-popup.js 6:46-67
 @ ./src/js/entry.js

Is there a way to just include the contents of a js file? Or some other way to solve the problem?

Answer 1

Include jQuery in the old-fashioned way in html, specify in the webpack config

externals: {
    jquery: 'jQuery'
}

and rejoice

import $ from 'jquery';
$('.block').html('Ура, jQuery с нами!');