获取jQuery和Bootstrap 4 JS与Webpack和Middleman一起工​​作

Question

尝试使用Middleman在我的Webpack Config上加载jQuery.

我正在尝试使用:

• 中间人4.2.1
• Bootstrap 4 Beta
• jQuery 3

我有Bootstrap的CSS加载但现在在尝试加载jQuery和Bootstrap的JS组件时遇到了问题.

不确定我是否正确使用了 ProviderPlugin

我已经使用--save-dev选项保存了所有依赖项.

// webpack.config.js
const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: [
    './source/assets/javascripts/all.js'
  ],

  module: {
    rules: [
      { test: /\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader'] },
      { test: /\.scss$/, use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'] },
    ]
  },

  output: {
    path: __dirname + './tmp/dist',
    filename: 'assets/javascripts/[name].bundle.js'
  },

  plugins: [
    new webpack.LoaderOptionsPlugin({
      minimize: true,
      debug: false
    }),

    new ExtractTextPlugin('assets/stylesheets/[name].bundle.css'),

    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery',
      Popper: ['popper.js', 'default'],
      // In case you imported plugins individually, you must also require them here:
      Util: "exports-loader?Util!bootstrap/js/dist/util",
      Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown",
      Alert: "exports-loader?Dropdown!bootstrap/js/dist/alert",
      Carousel: "exports-loader?Dropdown!bootstrap/js/dist/carousel",
      Collapse: "exports-loader?Dropdown!bootstrap/js/dist/collapse",
      Modal: "exports-loader?Dropdown!bootstrap/js/dist/modal",
      Popover: "exports-loader?Dropdown!bootstrap/js/dist/popover",
      Scrollspy: "exports-loader?Dropdown!bootstrap/js/dist/scrollspy",
      Tab: "exports-loader?Dropdown!bootstrap/js/dist/tab",
      Tooltip: "exports-loader?Dropdown!bootstrap/js/dist/tooltip",
    }),
  ]
};

我的index.js:

// This is where it all goes :)
console.log("Hello world");

控制台日志在浏览器上输出.

我的site.css.scss文件正在加载Bootstrap的样式:

@import "custom";
@import "../../../node_modules/bootstrap/scss/bootstrap.scss";
@import "index";

我是否需要在其他地方要求或导入jQuery而不仅仅是在webpack配置中？

任何反馈都非常感谢.

谢谢 :)