Webpack环境下magnificPopup报错：magnificPopup is not a function

你遇到的核心问题是Magnific Popup插件没有成功挂载到jQuery的原型链上，导致调用.magnificPopup()时找不到对应的方法。结合你的Webpack配置和代码，我整理了几个可行的解决方案：

方案1：修正插件的导入逻辑 #

Magnific Popup作为jQuery插件，需要确保在jQuery全局可用的前提下加载，才能自动挂载到$.fn上。你可以调整app.js的导入方式：

import $ from 'jquery';
// 先把jQuery暴露到全局环境
window.$ = window.jQuery = $;
// 用require加载插件，这会自动让插件绑定到全局的jQuery实例
require('magnific-popup');

$(document).ready(function() {
  $('.play-btn').magnificPopup({ type: 'video' });
});

如果上面的方式仍不生效，可以手动将插件挂载到jQuery原型：

import $ from 'jquery';
import magnificPopup from 'magnific-popup';

// 手动把插件绑定为jQuery的原型方法
$.fn.magnificPopup = magnificPopup;

window.$ = window.jQuery = $;

$(document).ready(function() {
  $('.play-btn').magnificPopup({ type: 'video' });
});

方案2：调整Webpack配置，优化插件识别逻辑 #

你的Webpack已经配置了ProvidePlugin，但可以再做两个小调整来避免潜在问题：

1. 确保Babel不编译magnific-popup的代码（部分旧插件转译后可能出现兼容性问题）
2. 确认ProvidePlugin的配置覆盖了插件可能用到的所有jQuery引用方式

修改后的webpack.config.js模块规则部分：

module: {
  rules: [{
    test: /\.js$/,
    // 排除node_modules下的所有文件，避免转译第三方插件
    exclude: /node_modules/,
    use: {
      loader: 'babel-loader',
      options: { presets: ["es2015"] }
    }
  }]
},

另外，如果你在vendor.js中也导入了jQuery，建议统一在一个入口文件中处理jQuery的全局暴露，避免重复引入导致的实例冲突。

额外检查项 #

• 确认magnific-popup已正确安装：可以查看node_modules目录下是否存在该文件夹，或重新执行npm install magnific-popup --save确保安装完整；
• 若使用Webpack 4+版本，可考虑用splitChunks优化第三方依赖打包，进一步避免jQuery重复加载的问题。

内容的提问来源于stack exchange，提问作者Shifut Hossain