使用 webpack 时找不到自定义 jQuery 扩展/插件

Question

我正在尝试迁移一个旧项目以使用.我写了一些自定义插件，不再工作。虽然我认为这个问题应该发生在其他人身上，但我找不到任何关于它的帖子。webpack

这是我包含：base.js

(function ($) {

    $.fn.my_extension = function () {

       alert("I am found!");

    };

}(jQuery));

这就是我在模板中使用它的方式：

<script type="text/javascript">

    $(document).ready(function() {

        $('#my-id').my_extension();

    });

</script>

这是我在我的包含：index.js

// JS Dependencies

import 'jquery';

...

// Custom JS

import '../js/base.js';

这是我的：webpack.config.js

var path = require('path');

var webpack = require('webpack');

var BundleTracker = require('webpack-bundle-tracker');

module.exports = {

    context: __dirname,

    mode: 'development',

    entry: './static/js/index.js',

    output: {

        path: path.resolve('./static/webpack_bundles/'),

        filename: "[name]-[hash].js"

    },

    module: {

        rules: [            

            {

                test: require.resolve('jquery'),

                use: [{

                    loader: 'expose-loader',

                    options: 'jQuery'

                }, {

                    loader: 'expose-loader',

                    options: '$'

                }]

            },

            ...

        ],

    },

    plugins: [

        new BundleTracker({filename: 'webpack-stats.json'}),

        new webpack.ProvidePlugin({

            $: "jquery",

            jQuery: "jquery",

            'window.jQuery': 'jquery'

        })]

}

这是我在调用模板时遇到的错误：

类型错误： $（...）.my_extension不是函数

任何想法，我可能做错了什么？

Answer 1

在尝试了多年的不同方法之后，我发现注册有效，但当我在模板中使用它时，jQuery不是同一个实例。解决我的问题的终于是将此行添加到我的.base.jsrequire('jquery');我不是100%确定，但我想暴露加载器正在识别此导入并为其创建全局范围。也许这对其他人有帮助。