javascript - 使用 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'
        })]
}

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

TypeError: $(...).my_extension is not a function

你知道我可能做错了什么吗？

Answer 1

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

最终将这一行添加到我的 base.js 中解决了我的问题。

require('jquery');

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