Laravel 5.6 - webpack: Uncaught ReferenceError: jQuery is not defined答案

【问题标题】：Laravel 5.6 - webpack: Uncaught ReferenceError: jQuery is not definedLaravel 5.6 - webpack: Uncaught ReferenceError: jQuery is not defined
【发布时间】：2019-01-04 18:23:21
【问题描述】：

我得到了 package.json：

  "devDependencies": {
    "axios": "^0.18.0",
    "bootstrap": "^4.1.3",
    "bootstrap-datepicker": "^1.7.1",
    "browser-sync": "^2.24.6",
    "browser-sync-webpack-plugin": "^2.0.1",
    "chart.js": "^2.7.2",
    "cross-env": "^5.2.0",
    "datatables": "^1.10.18",
    "easy-pie-chart": "^2.1.7",
    "font-awesome": "4.7.0",
    "fullcalendar": "^3.9.0",
    "jquery": "^3.3.1",
    "jquery-sparkline": "^2.4.0",
    "jvectormap": "^2.0.4",
    "laravel-mix": "^2.1.11",
    "load-google-maps-api": "^1.2.0",
    "lodash": "^4.17.10",
    "masonry-layout": "^4.2.2",
    "perfect-scrollbar": "^1.1.0",
    "popper.js": "^1.14.3",
    "skycons": "^1.0.0",
    "vue": "^2.5.16"
  }

使用 webpack.mix：

mix.sass('resources/assets/styles/index.scss', 'public/css/app.css')
    .js('resources/assets/scripts/index.js', 'public/js/app.js')
    .copyDirectory('resources/assets/static', 'public/static')
    .version()
    .sourceMaps();

和资源文件：

所以那些文件，看起来像被 webpack 正确编译 >> npm run dev 然后我将它加载到刀片模板，但随后在浏览器中显示：jQuery 未定义...

Uncaught ReferenceError: jQuery is not defined

这里可能出了什么问题，为什么它可以加载 jQuery 而我在 package.json 中定义了它？

谢谢！

【问题讨论】：

我不知道devDependencies 中的定义顺序是否重要，但如果确实如此，您在"jquery": "^3.3.1" 之前有"bootstrap": "^4.1.3"，这将是一个问题，因为Bootstrap 需要运行jQuery。
只有在 package.json 中的 jQuery 不应该在包中加载它。您应该在代码中的某处导入/使用它。在这种情况下，Webpack 应该扫描文件并将其包含在包中
@TimLewis 不，我认为顺序并不重要...
@codisfy，嗯，你给我提示，谢谢，我已经解决了:)
是的，我猜不是这样，但是在使用 Bootstrap 和 jQuery 时，<script> 包含的顺序可能是jQuery is not defined 的最常见原因，所以我想我会把它作为评论发布无论如何。

标签： laravel laravel-5 npm webpack laravel-5.6

【解决方案1】：

在我发布问题几分钟后...

这就是答案...

将此添加到您的 webpack：

mix.webpackConfig(webpack => {
    return {
        plugins: [
            new webpack.ProvidePlugin({
                $: 'jquery',
                jQuery: 'jquery',
                'window.jQuery': 'jquery',
            })
        ]
    };
});

【讨论】：