Webpack給出$未定義或者jQuery未在控制台中定義錯誤

Question

嘿伙計們我嘗試了一切，我准備好羞愧地爆發，我厭倦了在過去的4個小時里一遍又一遍地得到同樣的錯誤。 我只是要復制並粘貼控制台，以便我們可以看到它有多糟糕：

Uncaught Error: Bootstrap's JavaScript requires jQuery
    at bootstrap.min.js:6
(anonymous) @ bootstrap.min.js:6
etw.js:4 Fri Feb 10 2017
etw.js:125 Uncaught ReferenceError: $ is not defined
    at LFDTrack (etw.js:125)
    at Object.LFD_Search (etw.js:244)
    at User.lfd_search (etw.js:25)
    at etw.js:250
LFDTrack @ etw.js:125
LFD_Search @ etw.js:244
User.lfd_search @ etw.js:25
(anonymous) @ etw.js:250
jBox.min.js:2 Uncaught ReferenceError: jQuery is not defined
    at jBox.min.js:2
(anonymous) @ jBox.min.js:2
jquery.datetimepicker.full.min.js:1Uncaught ReferenceError: jQuery is not defined
    at jquery.datetimepicker.full.min.js:1
    at jquery.datetimepicker.full.min.js:1
(anonymous) @ jquery.datetimepicker.full.min.js:1
(anonymous) @ jquery.datetimepicker.full.min.js:1
owl.carousel.js:1517 Uncaught ReferenceError: jQuery is not defined
    at owl.carousel.js:1517
(anonymous) @ owl.carousel.js:1517
(index):539 Uncaught ReferenceError: $ is not defined
    at (index):539
(anonymous) @ (index):539
featherlight.min.js:8 Uncaught ReferenceError: jQuery is not defined
    at featherlight.min.js:8
(anonymous) @ featherlight.min.js:8
jquery.datetimepicker.full.min.js:1 Uncaught ReferenceError: jQuery is not defined
    at jquery.datetimepicker.full.min.js:1
    at jquery.datetimepicker.full.min.js:1
(anonymous) @ jquery.datetimepicker.full.min.js:1
(anonymous) @ jquery.datetimepicker.full.min.js:1
pagecrossfade-min.js:1 Uncaught ReferenceError: jQuery is not defined
    at pagecrossfade-min.js:1

這是我的main.js文件，條目：

"use strict";

import $ from 'jquery';
import jQuery from 'jquery';
window.$ = jQuery;
import moment from 'moment';
import _ from 'lodash';
import math from 'mathjs';
//import jBox from 'jbox';

這是我的webpack.config.js我嘗試過切換一切。 又取出加載器部分並將插件部分留在那里，或取出main.js中的導入，只留下webpack.config.js中的東西用於jquery等。沒有任何作用。 我覺得我是網絡上唯一一個仍然有這個錯誤的人，因為其他所有人都已經修好了所以我再也找不到谷歌搜索了。（ps我不知道除了日期時間選擇器和其他什么之外什么都不做控制台中的腳本是指向html文件中的cdn的腳本標記）

const path = require('path');
const webpack = require('webpack');

module.exports = {
    entry: './main.js',
    output: { path: __dirname, filename: 'bundle.js' },
    watch: true,
    plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery"
        })
    ],
    module: {
        loaders: [
            {
                test: /[\/\\]node_modules[\/\\]some-module[\/\\]index\.js$/,
                loader: "imports?this=>window"
            },
            {
                test: /[\/\\]node_modules[\/\\]some-module[\/\\]index\.js$/,
                loader: "imports?define=>false"
            }
    ]
    }
}

Answer 1

我遇到了同樣的問題。

我的錯誤是：

Uncaught ReferenceError: jQuery is not defined
    at eval (featherlight.min.js?60bc:8)
    at Object../node_modules/featherlight/release/featherlight.min.js 

你的問題實際上提供了解決它的暗示。

const $ = require("jquery");
window.jQuery = $;    //When I added this line, it worked!
require('featherlight');