带有popper的引导工具提示无法通过webpack工作

Question

我正在尝试通过 webpack 4.29.0 让 Bootstrap 4.2.1、jQuery 3.3.1 和 Popper.js 1.14.7 工作。

我的 main.js：

import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/tooltip';
import '@fortawesome/fontawesome-free';

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

我的 webpack.config.js

var webpack = require('webpack');
var path = require("path");
var _ = require("lodash");
var autoprefixer = require("autoprefixer");

const ExtractTextPlugin = require('extract-text-webpack-plugin');


const nodeEnv = process.env.NODE_ENV || 'development';
const isDev = nodeEnv !== 'production';

var webpackFailPlugin = function () {
  this.plugin("done", function (stats) {
    if (stats.compilation.errors && stats.compilation.errors.length && process.argv.indexOf("--watch") === -1) { // eslint-disable-line
      process.on("beforeExit", function () {
        process.exit(1);
      });
    }
  });
};

// Disable CSSModules here
const CSSModules = true;

module.exports = {
  mode: nodeEnv,
  output: {
    path: path.resolve(__dirname, "./public/assets"),
    publicPath: '/assets/',
    filename: 'bundle.js'
  },
  entry: ['./site/main.js', './site/styles/main.scss'],
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|ico)$/,
        use: 'file-loader?name=assets/[name].[hash].[ext]'
      },
      {
        test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
        use: 'url-loader?limit=10000&mimetype=application/font-woff'
      },
      {
        test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
        use: 'url-loader?limit=10000&mimetype=application/font-woff'
      },
      {
        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
        use: 'url-loader?limit=10000&mimetype=application/octet-stream'
      },
      {
        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
        use: 'file-loader'
      },
      {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        use: 'url-loader?limit=10000&mimetype=image/svg+xml'
      },
      {
        test: /\.(scss)$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          //resolve-url-loader may be chained before sass-loader if necessary
          use: ['css-loader', 'sass-loader']
        })
      }
    ]
  },
  optimization: {
    minimize: true
  },
  plugins: [
    new ExtractTextPlugin("styles.css"),
    new webpack.ProvidePlugin({
      $: 'jquery/dist/jquery.min',
      jQuery: 'jquery/dist/jquery.min',
      Popper: ['popper.js', 'default'],
    })
  ].concat(
    [
      webpackFailPlugin
    ]).concat([
      new webpack.NoEmitOnErrorsPlugin()
    ])
}

打包后，Chrome 向我显示以下错误：

jQuery.Deferred exception: $(...).tooltip is not a function TypeError: $(...).tooltip is not a function
    at HTMLDocument.eval (webpack:///./site/main.js?:13:32)
    at l (webpack:///./node_modules/jquery/dist/jquery.min.js?:2:29357)
    at c (webpack:///./node_modules/jquery/dist/jquery.min.js?:2:29659) undefined
Uncaught TypeError: $(...).tooltip is not a function
    at HTMLDocument.eval (main.js:13)
    at l (jquery.min.js:2)
    at c (jquery.min.js:2)

我做错了什么？ bundle.js 的库按以下顺序排列：

• 字体真棒
• bootstrap/tooltip.js
• bootstrap/util.js
• jquery
• jquery.min
• popper.js

这不是 bootstrap 指定的（jquery、popper、bootstrap），但我不知道这是否重要。

Answer 1

找到了解决办法！这是Bootstrap 4.1.3 的一个变化，在 4.1.2 中我的实现仍然有效。

这是我的新 main.js：

import $ from 'jquery';

import 'bootstrap/js/dist/tooltip';

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

我现在可以从 webpack.config.js 中删除 new webpack.ProvidePlugin 部分