与 Webpack 捆绑时无法使 Tether 适用于 Bootstrap 4

Question

我已经花了两天时间尝试使用webpack将引导程序捆绑在一起。我已经使jQuery工作了，但是为了使Bootstrap完全运行，我们还需要系绳（在我的情况下 - 对于弹出案）。我已经遵循了本指南，而且还遵循此包装。尽管如此，问题仍然存在，我遇到了错误，告诉我 popover不是函数。

我的配置看起来像这样。

var webpack = require("webpack");
module.exports = {
  entry: ["babel-polyfill", "./index.js"],
  //entry: ["babel-polyfill", "./index.js", "tether"],
  output: { path: __dirname, filename: "bundle.js" },
  plugins: [new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    jquery: "jquery",
    "window.$": "jquery",
    "window.jQuery": "jquery",
    "window.jquery": "jquery",
    "Tether": "tether",
    "window.Tether": "tether",
    // Popover: "exports?Popover!bootstrap/js/dist/popover",
  })],
  ...
}

在最后几天，我几乎尝试过任何事情，但我已经没有弹药了。我如何对其进行故障排除？

还有其他尚未解决类似问题的其他问题，但似乎似乎不情愿地系绳的人。我很困惑，我可以哭泣...

Answer 1

这是我的工作bootstrap js and scss in vuejs project：

in webpack.config.js

var path = require('path')
var webpack = require('webpack')
module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    rules: [
      {
        test: /.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
            // the "scss" and "sass" values for the lang attribute to the right configs here.
            // other preprocessors should work out of the box, no loader config like this necessary.
            'scss': 'vue-style-loader!css-loader!sass-loader',
            'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
          }
          // other vue-loader options go here
        }
      },
      {
        test: /.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      },
      {
        test: /.scss$/,
        loader: 'style-loader!css-loader!sass-loader'
      }
    ]
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery', jQuery: 'jquery',
      Tether: 'tether', tether: 'tether'
    }),
  ],
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
};

in main.js

// Globally require jQuery, you cannot access jQuery from Console without this code
window.$ = require('jquery')
import 'bootstrap' // importing bootstrap.js
import "bootstrap/scss/bootstrap.scss"
import "./assets/scss/main.scss"
import Vue from 'vue'
import App from './App.vue'
new Vue({
  el: '#app',
  render: h => h(App)
});

in main.scss

$font-family-primary: 'Source Sans Pro', sans-serif; // Customize the bootstrap scss
@import '~bootstrap/scss/bootstrap.scss';

我的git设置https://github.com/syed-haroon/vue-js-2-basic-setup

我还鼓励您查看此URL，以获取更简单的工作设置https://github.com/prograhammer/example-vue-project

Answer 2

使用react，webpack和bootstrap 4，它一直问我" bootstrap tooltips需要系绳"，即使我添加了'tether'：'tether'：'tether'因此，我不得不添加条款/dist/js/tether.min.js进入条目以使其正常工作。请参阅下面的

    module.exports = {
  entry: [
    'script-loader!jquery/dist/jquery.min.js',
    'script-loader!tether/dist/js/tether.min.js',
    'script-loader!bootstrap/dist/js/bootstrap.min.js',
    './app/app.jsx',
  ],
  externals: {
    jQuery: 'jQuery'
  },
  plugins: [
    new webpack.ProvidePlugin({
      '$': 'jQuery',
      'jQuery': 'jQuery',
      'Tether': 'tether'
    }),