كيفية معرفة اصدارات الحزم المتوافقة بين بعضها

المشكلة ليست في إصدارات الحزم . 

 //  jquery هذا الكود يعمل في جميع إصدارات 

$(function () {

    $('.add-to-cart-btn').on("click", function () {

        alert('أضيف المُنتج إلى السلة');   

    });

});

المشكلة في في كيفية تضمينك ل jquery في webpack

لكي تقوم بضمين jquery في webpack توجد العديد من الطرق أسهلها:

في ملف  webpack.config.js الخاص بك في المكون plugins ضع الكود التالي:

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

هذا يعني أنه يمكن الوصول إلى jquery من داخل شفرة مصدر JavaScript عبر المراجع العالمية $ و jQuery.

بالطبع ، تحتاج أيضًا إلى تثبيت jquery عبر npm:

$ npm i jquery --save

كما أخبرك محمد في التعليق السابق أن المشكلة في استدعاء المكتبة ويمكنك حلها بواسطة webpack.ProvidePlugin كما وضح 

ولكن أرى أنك تستخدم ال expose-loader لذلك الحل بالنسبة لك فقط جرب استدعاء المكتبة كالتالي 

import $ from "jquery";
//بدلاً من 
import 'jquery/dist/jquery.min';