webpack - 带有 popper 的 Bootstrap 工具提示无法通过 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()
})

我现在可以删除 new webpack.ProvidePlugin来自 webpack.config.js 的部分