Webpack 4: Make Jquery available globally across website

Question

I wanted to know the best way, performance, to include jQuery globally to my Webpack 4 website. I npm installed jquery and am manually adding jquery to every js file using:

import $ from "jquery";

I know this is not the right way. I have looked at CommonsChunkPlugin that seemed to solve my problem but it got depreciated since Webpack 4. Now it is SplitChunkPlugin but the documentation is hard to wrap my head around.

I would love to just Cache jQuery as the CommonsChunkPlugin did so I do not have to load it in again every time your changing pages on my website. This is my Webpack Config file in case it helps:

    devServer: {
        host: 'localhost',
        port: 8080,

    },

    entry: {
        homepage: "./src/scripts/homePage.js",
        searchpage: "./src/scripts/searchPage.js",
        estimation: "./src/scripts/estimation.js"

    },

    output: {
        path: __dirname + "/dist/",
        filename: "scripts/[name].bundle.js",
        library: '[name]',
        libraryTarget: 'var',
    },

    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /Node.modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                 test: /\.html$/,
                use: [
                    {
                        loader: "html-loader",
                        options: { minimize: true}
                    }
                ]
            },
            {
                 test: /\.(png|svg|jpg|gif)$/,
                use: [
                    {
                        loader: "file-loader",
                    }
                ]
            },
            {
                 test: /\.s?css$/,
                use: [
                    "style-loader",
                    "css-loader",
                    "sass-loader"
                ]
            },

        ]
    },
    plugins: [

        new HtmlWebPackPlugin({
            template: "./src/html/index.html",
            filename: "./index.html",
            inject: 'head',
            chunks : ['homepage'],
            inlineSource: '.(js|css)$'
        }),
        new HtmlWebpackInlineSourcePlugin(),
        new HtmlWebPackPlugin({
            template: "./src/html/estimation.html",
            filename: "./estimation.html",
            inject:'head',
            chunks : ['estimation'],
        }),

        new HtmlWebPackPlugin({
            template: "./src/html/contact.html",
            filename: "./contact.html"
        }),

        new HtmlWebPackPlugin({
            template: "./src/html/searchpage.html",
            filename: "./searchpage.html",
            inject: 'head',
            chunks : ['searchpage'],
        }),
        new HtmlWebPackPlugin({
            template: "./src/html/favorites.html",
            filename: "./favorites.html"
        }),
        new MiniCssExtractPlugin({
            filename:"[name].css",
            chunkFilename:"[id].css"
        })

    ]
}```

Answer 1

I solved my own problem haha.

The answer is using the webpack ProvidePlugin here is a link : ProvidePlugin You Add it to the plugins section in your webpack.config file like shown below:

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

It will make the jquery $ variable available across your project so you won't have to import it all over. The handy thing about it is that if you have other libraries that use Jquery (Bootstrap for example), it will also be available for those libraries. So you won't get an error that $ is not defined!

And if I am not wrong, jquery gets automatically cached in the browser so most of the times when a user enters the website, it will already have jquery cached in his browser since he probably visited other websites using jquery. That clears up the other part of my question.