Javascript 放大弹出窗口不适用于网页包

Javascript 放大弹出窗口不适用于网页包,javascript,jquery,webpack,magnific-popup,Javascript,Jquery,Webpack,Magnific Popup,在将其导入app.js文件后,我通过“npm I magnific popup”命令安装了magnific popup。但在浏览器控制台中显示(放大弹出窗口不是功能) app.js import $ from "jQuery"; window.$ = window.jQuery = $; import "magnific-popup"; $(document).ready(function() { $('.play-btn').magnificPopup({ type: 'video'

在将其导入app.js文件后,我通过“npm I magnific popup”命令安装了magnific popup。但在浏览器控制台中显示(放大弹出窗口不是功能)

app.js

import $ from "jQuery";
window.$ = window.jQuery = $;
import "magnific-popup";

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

});
webpack.config.js

var path = require("path");
var webpack = require('webpack');


module.exports = {
    entry: {
        app: "./app/assets/scripts/app.js",
        vendor: "./app/assets/scripts/vendor.js"
    },
    output: {
        path: path.resolve(__dirname, "./app/temp/scripts"),
        filename: "[name].js"
    },
    module: {
        rules: [{
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ["es2015"]
                    }
                }
            }

        ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            '$': 'jquery',
            'jQuery': 'jquery',
            'window.jQuery': 'jquery'
        }),
    ]
}

很简单,您的文件不在导入位置。请检查您的路径或文件位置/位置一次。此外,请检查您的JQuery库(如果包含),然后它应该位于此库文件/代码上方。

我已解决了此问题

jQuery不需要在app.js中导入

修复app.js后,文件如下所示

import "magnific-popup";

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

});

Jquey和放大弹出文件位于导入位置(节点\模块)。JQuery库也包含在放大弹出插件的上方