How to avoid same modules duplication Webpack bundling?

Question

I use laravel-mix (including webpack) to bundle JS files. Using BundleAnalyzerPlugin I found that my output file includes more than one copy of JQuery lib which boosts the output file size.

It seams several modules includes JQuery by themselves.

Any ideas how to avoid this and remove all redundant jquery inclusions?

(UPDATED with more info)

Image of Bundle analyzer output

webpack.mix.js

const { mix } = require('laravel-mix');
const webpack = require('webpack');

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

mix.js('resources/assets/js/admin.js', 'public/js')

mix.webpackConfig({
    plugins: [
        new BundleAnalyzerPlugin(),
        new webpack.ProvidePlugin({ // Added as a suggestion. Makes no difference
            '$': 'jquery',
            'jQuery': 'jquery',
            'window.jQuery': 'jquery'
        })
    ],
});

admin.js

import 'jquery'
import 'toastr'

Answer 1

import 'jquery' in your entry file and add the below block to your webpack.config

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

Refer: Webpack Provide Plugin