使用 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.js中。

require('jquery');

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