引导提示与波普尔不通过的WebPack工作

Question

我试图让引导4.2.1，jQuery的3.3.1和Popper.js 1.14.7通过的WebPack 4.29.0工作。

我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有顺序的库：

• fontawesome
• 引导/ tooltip.js
• 引导/ util.js中
• jQuery的
• jquery.min
• popper.js

这是不是引导（jQuery的，波普尔，引导）指定的，但我不知道这事。

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节