JQuery не загружается должным образом в среде WebPack - PullRequest
0 голосов
/ 07 сентября 2018

Я получаю следующую ошибку в Chrome при запуске webpack-dev-server для веб-сайта, который я создаю:

Uncaught ReferenceError: $ is not defined

Эта ошибка генерируется из следующего кода в нижней части HTML-страницы:

<!-- SCRIPTS -->
<script type='text/javascript'>
  // SideNav Button Initialization
  $(".button-collapse").sideNav();
  // SideNav Scrollbar Initialization
  var sideNavScrollbar = document.querySelector('.custom-scrollbar');
  Ps.initialize(sideNavScrollbar);
</script>

Я полагаю, что это вызвано тем, что jQuery не импортируется и не инициализируется должным образом, но, похоже, все настроено правильно. Я использую MDBootStrap и следовал инструкциям по настройке WebPack.

Мой webpack.config.js файл имеет следующие конфигурации, начиная с записи:

entry: [
    'babel-polyfill',
    './src/js/app.js',
    './src/scss/main.scss',
    './src/vendors/mdb/scss/mdb.scss',
],

Вот часть, которая настраивает плагины:

plugins: [
    extractPlugin,
    new webpack.ProvidePlugin({
      jQuery: 'jquery',
      $: 'jquery',
      'window.$': 'jquery',
      'window.jQuery': 'jquery',
      Waves: 'node-waves',
}),

app.js, который является первой записью после babel-polyfill и настроен, как указано ниже:

// jQuery
import 'jquery';

// PopperJS
import 'popper.js';

// Bootstrap 4
import 'bootstrap';

// Material Design Bootstrap
import '../vendors/mdb/js/mdb';

// Fontawesome 5
import './fa5';

// Example
import './example';

$ должно быть определено, но по какой-то причине я не могу понять, почему это не работает.

...