我试图弄清楚为什么我的Bootstrap 5模态事件似乎只在我使用纯JavaScript时触发（例如addEventListener show.bs.modal），但是当我在jQuery中尝试相同的事情时，事件却没有触发。

var myModal = document.getElementById('detailModal')
    myModal.addEventListener('show.bs.modal', function (event) {
        alert("I show correctly when the Modal opens!")
    })

    $('#detailModal').on('show.bs.modal', function (event) {

        alert('I do not show...');
    })

    // Also does not work...
    $('#detailModal').modal('show');

这可能是因为我使用Webpack来包含Bootstrap/jQuery库（我完全是Webpack初学者）。Webpack配置文件如下...

const path = require('path')
const webpack = require('webpack');

module.exports = {
    entry: {
        site: './JsSrc/main.js',
        reporttemplate: './JsSrc/ReportTemplateDetails.js'
    },
    output: {
        filename: '[name]compiled.js',
        path: path.resolve(__dirname, 'wwwroot','js')
    },
    mode: 'development',
    devtool: 'source-map',
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /\.(eot|woff(2)?|ttf|otf|svg)$/i,
                type: 'asset'
            }
        ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        })
    ]
}

因为使用纯JavaScript引用可以工作，所以我可以继续这样做，但是我担心它不能使用jQuery，这可能表明我做错了其他事情（Webpack的配置或其他）。