Bootstrap4ポップアップとツールチップ（Popper.js）のwebpackを設定する方法

Question

私はブートストラップ4アルファからベータに更新しようとしていますが、私はwebpackを使用しています！
これまで互換性があるためにコードを正常に移行しましたが、唯一のことはツールチップとドロップダウンが機能することです。ドキュメントによると、彼らはそのような機能はpopper.jsに依存していると私は動作するように設定する方法の例を与えた！
私は、これらの指示に従ってきましたが、今私はドロップダウンと私はTypeError: popper is undefined

取得ツールチップを使用したいときは、私は私が

ここに欠けているかを把握カント

const path = require('path'); 
const webpack = require('webpack'); 
const { mix } = require('laravel-mix'); 

mix.webpackConfig({ 
    output: { 
     path: path.join(__dirname, "/public"), 
     publicPath: '/', 
     chunkFilename: 'js/modules/[name].js' 
    }, 
    plugins:[ 
     new webpack.ProvidePlugin({ 
      Moment: 'moment', 
      'window.Moment': 'moment', 
      Popper: ['popper.js', 'default'], 
      popper: ['popper.js', 'default'], 
      // 'window.Po': ['popper.js', 'default'] 
     }), 
     new webpack.optimize.MinChunkSizePlugin({minChunkSize: 100000}) 
    ] 
}); 

/* 
|-------------------------------------------------------------------------- 
| Mix Asset Management 
|-------------------------------------------------------------------------- 
| 
| Mix provides a clean, fluent API for defining some Webpack build steps 
| for your Laravel application. By default, we are compiling the Sass 
| file for the application as well as bundling up all the JS files. 
| 
*/ 

mix.autoload({ 
    vue: [ 'Vue', 'window.Vue' ], 
    // moment: ['window.moment', 'Moment'], 
    jquery: ['$','jQuery','window.jQuery'], 
    tether: ['window.Tether', 'Tether'], 
    axios: ['axios','window.axios'], 
    'cookies-js': ['Cookies'] 
}); 

mix.js('resources/assets/js/app.js', 'public/js') 
    .extract(['vue','lodash','cookies-js','jquery','moment','tether','bootstrap','axios']) 
    .sass('resources/assets/sass/app.scss', 'public/css') 
    .js('resources/assets/js/admin.js', 'public/js') 
    .sass('resources/assets/sass/admin.scss', 'public/css') 
    .version() 
    .browserSync({ 
     proxy: 'localhost:8000' 
    }); 

webpack.mix.js

UPDATE
HTMLコード

<li class="nav-drop dropdown"> 
    <a href="#currency-menu" data-toggle="dropdown">{{ moneyCurrencyCode() }}</a> 
    <ul id="currency-menu" class="list nav-drop-menu dropdown-menu"> 
     <li><a data-toggle="currency" data-currency="MZN" href="#">MZN</a></li> 
     <li><a data-toggle="currency" data-currency="ZAR" href="#">ZAR</a></li> 
     <li><a data-toggle="currency" data-currency="USD" href="#">USD</a></li> 
     <li><a data-toggle="currency" data-currency="EUR" href="#">EUR</a></li> 
    </ul> 
</li> 

Answer 1

！私は、ブートストラップから、私はそれが見えたので、ドロップダウンtoogleに=「＃」をてhrefにHREF =「＃通貨・メニュー」を変更しなければならなかったベータに4アルファが

HTMLコード

<li class="nav-drop dropdown"> 
    <a href="#" data-toggle="dropdown">{{ moneyCurrencyCode() }}</a> 
    <ul id="currency-menu" class="list nav-drop-menu dropdown-menu"> 
     <li><a data-toggle="currency" data-currency="MZN" href="#">MZN</a></li> 
     <li><a data-toggle="currency" data-currency="ZAR" href="#">ZAR</a></li> 
     <li><a data-toggle="currency" data-currency="USD" href="#">USD</a></li> 
     <li><a data-toggle="currency" data-currency="EUR" href="#">EUR</a></li> 
    </ul> 
</li> 

Answer 2

これは実際に私の作品：私は問題は構成ではなくHTMLコードではなかったことを考え出したいくつかの調査の後

let mix = require('laravel-mix'); 
let webpack = require('webpack'); 

mix.js('resources/assets/js/app.js', 'public/js') 
    .sass('resources/assets/sass/app.scss', 'public/css') 
    .webpackConfig({ 
    plugins: [ 
     new webpack.ProvidePlugin({ 
     $: 'jquery', 
     jQuery: 'jquery', 
     'window.jQuery': 'jquery', 
     Popper: ['popper.js', 'default'], 
     }) 
    ] 
    }) 
    .version(); 

Answer 3

を以下している移行したので、

laravel webpack mixを使用してbootsrap4（beta）ポップアップ、ツールチップ、ドロップダウンを使用するには、popper.jsをブートストラップ4とともにダウンロードする必要があります。

あなたがpopper.jsを含めるようにリソース/資産/のJS/bootstrap.jsファイルを編集しました。その後

npm install bootstrap:4.0.0-beta popper.js --save 

：

try { 
    window.$ = window.jQuery = require('jquery'); 
    window.Popper = require('popper.js/dist/umd/popper.js').default; 

    require('bootstrap/js/src/dropdown'); 
    require('bootstrap/js/src/popover'); 
    require('bootstrap/js/src/tooltip'); 

} catch (e) { 
} 

終わりにあなたもwebpack.mixを編集しました.jsファイル：