jquery - 使用 webpack 时 jQuery 插件不起作用。什么是正确的使用方法？

Question

我尝试在我的开发中使用 webpack。我使用 npm，安装 jquery 和一些插件（YTPlayer，fancybox）。webpack入口文件是template.js，我的测试脚本是web.js（有插件调用）。jQuery 工作正常，但是当我调用插件时，我看到 TypeError: s(...).plugin is not a function... template.js 编译正常，我在那里看到 jquery 和插件，但它不允许在 web .js。

这是 package.json：

{
  "name": "greenkey4",
  "version": "1.0.0",
  "main": "code/template.js",
  "dependencies": {
    "@fancyapps/fancybox": "^3.3.5",
    "bootstrap": "^4.1.1",
    "jquery": "^3.3.1",
    "jquery.mb.ytplayer": "^3.2.2",
    "popper.js": "^1.14.3"
  },
  "devDependencies": {
    "autoprefixer": "^8.6.4",
    "css-loader": "^0.28.11",
    "file-loader": "^1.1.11",
    "node-sass": "^4.9.0",
    "postcss-loader": "^2.1.5",
    "sass-loader": "^7.0.3",
    "style-loader": "^0.21.0",
    "webpack": "^4.13.0",
    "webpack-cli": "^3.0.8"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack --watch"
  },
  "author": "",
  "license": "ISC",
  "description": ""
}

这是 webpack.config.js：

const path = require('path');

// webpack.config.js
const webpack = require('webpack')

module.exports = {
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            '$': 'jquery',
            jquery: 'jquery',
            jQuery: 'jquery',
            'window.jquery': 'jquery',
            'window.jQuery': 'jquery',
            'window.$': 'jquery'
        })
    ],
    entry: ['./code/template.js', './scss/template.scss'],
    output: {
        path: path.resolve(__dirname, 'assets'),
        filename: 'template.js'
    },
    resolve: {
        root: ['./node_modules']
    },
    module: {
        rules: [
            {
                test: /\.(scss)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].css',
                            outputPath: ''
                        }
                    },
                    //{
                        // Adds CSS to the DOM by injecting a `<style>` tag
                        // This loader using when disable file-loader, to include css into bundle.js
                        //loader: 'style-loader'
                    //},
                    //{
                        // Interprets `@import` and `url()` like `import/require()` and will resolve them
                        // This loader using when disable file-loader, to include css into bundle.js
                        //loader: 'css-loader'
                    //},
                    {
                        // Loader for webpack to process CSS with PostCSS
                        loader: 'postcss-loader',
                        options: {
                            plugins: function () {
                                return [
                                    require('autoprefixer')
                                ];
                            }
                        }
                    },
                    {
                        // Loads a SASS/SCSS file and compiles it to CSS
                        loader: 'sass-loader'
                    }
                ]
            }
        ]
    },
    watch: true,
    devtool: "source-map",
    // This remove jquery code from bundle to use external CDN
    externals: {
        //jquery: 'jQuery'
    }
};

这是模板.js：

let $ = require('jquery');
window.$ = window.jQuery = $;
import 'bootstrap';
import 'jquery.mb.ytplayer';
import '@fancyapps/fancybox';
import './web';

和我使用插件 web.js 的文件

$(document).ready(function () {

    $("button.offcanvas").click(function (e) {
        $("body").toggleClass("hide");
        e.preventDefault();
        return false;
    });

    $(".offside").click(function (e) {
        $("body").toggleClass("hide");
        //e.preventDefault();
        //return false;
    });

    $("#bgndVideo").YTPlayer();

    $('[data-fancybox="images"]').fancybox({
        afterLoad : function(instance, current) {
            var pixelRatio = window.devicePixelRatio || 1;

            if ( pixelRatio > 1.5 ) {
                current.width  = current.width  / pixelRatio;
                current.height = current.height / pixelRatio;
            }
        }
    });

});

我寻找整个互联网，尝试了许多解决方案，但它不起作用！

编译的 template.js 你可以在那里看到： 编译的 template.js 最后一件事——fancybox 正在工作，但不是来自 web.js。如果我把它放在html中：

<a data-fancybox="images" href="images/counter/1.jpg"><img src="images/counter/1.jpg" style="width:200px"></a>
<a data-fancybox="images" href="images/counter/2.jpg"><img src="images/counter/2.jpg" style="width:200px"></a>

它工作正常。

标签： jquerynpmwebpackplugins