嗨， 我试图让 Alpine 和 webpack 一起运行，但总是出错，不知道该怎么做。

我的 Webpack 配置：

const path                 = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const isProduction         = 'production' === process.env.NODE_ENV;
const { VueLoaderPlugin } = require('vue-loader')
const webpack = require('webpack');


// Set the build prefix.
let prefix = isProduction ? '.min' : '';

const config = {
    entry: {
        main: './source/js/main.js',
        admin: './source/js/admin.js',
        admin_head: './source/js/admin_head.js',
        classic: './source/js/classic.js',
    },
    output: {
        filename: `[name]${prefix}.js`,
        path: path.resolve(__dirname, 'dist')
    },
    mode: process.env.NODE_ENV,
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                options: {
                    presets: [
                        [
                            "@babel/preset-env"
                        ]
                    ]
                }
            },
            {
                test: /\.s[ac]ss$/i,
                use: [
                    'vue-style-loader',
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'sass-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: {
                                plugins: [
                                    require('postcss-import'),
                                    require('tailwindcss')('tailwind.js'),
                                    require('postcss-nested'),
                                    require('autoprefixer'),
                                ]
                            }
                        }
                    }
                ],
            },
        ]
    },
    plugins: [
        new VueLoaderPlugin(),
        new MiniCssExtractPlugin(),
        new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
    ],
    resolve: {
        alias: {
            vue: process.env.NODE_ENV == 'production' ? 'vue/dist/vue.min.js' : 'vue/dist/vue.js'
        }
    }
}
module.exports = config

我的脚本文件：

    $(function (){
        $('.color-picker').wpColorPicker();
    })
})(jQuery)

import Alpine from 'alpinejs'
Alpine.start();

脚本在页脚中通过延迟加载：

<script defer src="https://ir.test/wp-content/plugins/real-time-comments/dist/admin_head.js?ver=1.1.1"></script>

在 php 文件中：

<div x-data="{ tab:'main' }">
                <div class="bg-white grid grid-cols-6 gap-5">
                    <div class="pt-10 px-5">
                        <img src="<?php echo RTC_URL ?>dist/images/logo-full.svg" class="border-none w-full h-auto"/>
                        <div class="flex flex-col w-full mt-10">
                            <div @click="tab = 'main'"
                                 :class="tab == 'main' ? 'border-b-2 border-plugin border-plugin font-bold' : 'border-b border-gray-500'"
                                 class="px-5 py-3 cursor-pointer">
                                <?php _e( 'Main settings', 'real-time-comments' ) ?>
                            </div>
                            <div @click="tab = 'pusher'"
                                 :class="tab == 'pusher' ? 'border-b-2 border-plugin border-plugin font-bold' : 'border-b border-gray-500'"
                                 class="px-5 py-3 cursor-pointer">
                                <?php _e( 'Pusher API settings', 'real-time-comments' ) ?>
                            </div>
                            <div @click="tab = 'layout'"
                                 :class="tab == 'layout' ? 'border-b-2 border-plugin border-plugin font-bold' : 'border-b border-gray-500'"
                                 class="px-5 py-3 cursor-pointer">
                                <?php _e( 'Layout settings', 'real-time-comments' ) ?>
                            </div>
                        </div>


                    </div>
                    <div class="col-span-5">
                        <form method="post" action="options.php">
                            <div>
                                <div class="p-5 bg-gray-200">
                                    <div x-show.transition="tab == 'main'">
                                        <?php settings_fields( 'rtc_main_settings_section' ); ?>
                                        <?php do_settings_sections( 'rtc_main_settings_page' ); ?>
                                    </div>
                                    <div x-show.transition="tab == 'pusher'">
                                        <?php settings_fields( 'rtc_pusher_settings_section' ); ?>
                                        <?php do_settings_sections( 'rtc_pusher_settings_page' ); ?>
                                    </div>
                                    <div x-show.transition="tab == 'layout'">
                                        <?php settings_fields( 'rtc_layout_settings_section' ); ?>
                                        <?php do_settings_sections( 'rtc_layout_settings_page' ); ?>
                                    </div>
                                </div>
                            </div>
                            <input type="submit" name="submit" id="submit"
                                   class="block w-full text-center bg-plugin py-3 text-center text-white my-10 shadow-lg hover:shadow cursor-pointer"
                                   value="<?php echo __( 'save', 'real-time-comments' ) ?>">
                        </form>
                    </div>
                </div>
            </div>
        </div>

加载页面时出错；

Alpine Expression Error: func(...).catch is not a function

Expression: "{ tab:'main' }"

有人知道我做错了什么吗？或者有人能举个例子说明如何使用 webpack 包含 alpine.js。在哪里以及如何包含脚本？我无法通过 cdn 加载它，因为 wordpress 插件目录不允许它。我知道在 wp 后端使用 alpine 有点过度，因为它自带了 jquery，但对于前端文件我遇到了同样的错误。