Question

我试图通过Webpack 4.29.0使Bootstrap 4.2.1，jQuery 3.3.1和Popper.js 1.14.7正常工作。

我的main.js：

console.log(event)

我的webpack.config.js

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

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

收拾行李后，Chrome会向我询问以下错误：

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()
    ])
}

我在做什么错？ bundle.js具有以下库的顺序：

fontawesome
bootstrap / tooltip.js
bootstrap / util.js
jquery
jquery.min
popper.js

哪个不是引导程序（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部分

带有popper的Bootstrap工具提示无法通过Webpack运行

1 个答案: