从 webpack 构建后无法识别 Jquery答案

【问题标题】：Jquery is not recognised after build from webpack从 webpack 构建后无法识别 Jquery
【发布时间】：2017-11-11 07:12:12
【问题描述】：

所以我正在尝试使用 webpack 进行构建。并且编译的页面抛出错误

Uncaught ReferenceError: $ is not defined
    at Object._typeof (bootstrap.js:30331)
    at __webpack_require__ (bootstrap.js:20)
    at Object.<anonymous> (bootstrap.js:27876)
    at __webpack_require__ (bootstrap.js:20)
    at Object.<anonymous> (bootstrap.js:70744)
    at __webpack_require__ (bootstrap.js:20)
    at bootstrap.js:66
    at bootstrap.js:69

我的未编译

Bootstrap.js

    window.$ = window.jQuery = require('jquery');

    window._ = require('lodash');


    window.Vue = require('vue');

    window.axios = require('axios');

    window.axios.defaults.headers.common = {
        'X-CSRF-TOKEN': window.Laravel.csrfToken,
        'X-Requested-With': 'XMLHttpRequest'
    };



    window.Pusher = require('pusher-js');

    require('toastr');

    require('jquery-slimscroll');

    //Jquery sortable
    require('jquery-sortable');


    import "select2";
    import "./metisMenu/jquery.metisMenu";
    import "./dataTables/datatables.min";
    import "./datapicker/bootstrap-datepicker";
    import "./touchspin/jquery.bootstrap-touchspin.min";
    import "./inspinia";

编译后，我在浏览器中收到该错误，但我没有收到任何编译错误

还有其他人遇到过类似的问题吗？

谢谢

【问题讨论】：

你可以试试 -import $ from 'jquery';
@MukulSharma 抱歉没听明白，我已经将 Jquery 分配给那个变量了？
我之前也遇到过类似的问题。可能某些 jquery 插件与 CommonJS 不兼容。尝试使用script-loader
@Ematipico 我该怎么办？甚至像 toastr 这样的其他插件也无法正常工作， $ ， JQuery 都未定义
require('script-loader!jquery')

标签： javascript webpack laravel-5.4

【解决方案1】：

您还必须提供上下文的范围。尝试使用ProvidePlugin

new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery'
 })

并且不要删除 jQuery 库的导入

【讨论】：

我试过了，Jquery 错误消失了，但$ 没有定义