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

【问题标题】：Custom jQuery extensions/plugin not found when using webpack使用 webpack 时找不到自定义 jQuery 扩展/插件
【发布时间】：2020-05-25 11:57:24
【问题描述】：

我正在尝试迁移旧项目以使用 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'
        })]
}

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

TypeError: $(...).my_extension 不是函数

有什么想法我可能做错了吗？

谢谢！

【问题讨论】：

标签： javascript jquery webpack

【解决方案1】：

在尝试了多年的不同方法后，我发现注册有效，但是当我在模板中使用 jQuery 时，它不是同一个实例。

解决我的问题的方法是最终将这一行添加到我的base.js。

require('jquery');

我不是 100% 确定，但我猜暴露加载器正在识别这个导入并为其创建全局范围。

也许这对其他人有帮助。

【讨论】：