Question

在为我要构建的网站运行webpack-dev-server时，Chrome中出现以下错误：

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';

$应该被定义，但是由于某些原因，我不知道为什么它不起作用。

jQuery在WebPack环境中无法正确加载

0 个答案: