指定されたパッケージをランタイムとして使用するベンダーファイルにバンドルするプラグインはありますか？

Question

なぜこれが必要ですか？例えば

、私は私のWebPACKのプロジェクトの外観とvue、vuex、vue-routerとjqueryを使用するので、スピードを向上させ、不要な廃棄物を避けたいです。それは私のhtmlファイルに4個の<script>タグを必要とするため

理由だけではなく、見た目のオプション

を使用していません。しかし、私はそれらを1つのファイルにバンドルするだけです。

私の現在のソリューション

バンドルコンテンツである個別のファイルは：

if (window) { 
    window.Vue = require('vue/dist/vue.runtime.common.js') 
    window.Vuex = require('vuex/dist/vuex.js') 
    window.$ = require('jquery') 
    window.VueRouter = require('vue-router/dist/vue-router.common.js') 
} 

は、出力ファイル名が vendor.xxxx.jsであると言う、と私は手動で私のHTMLテンプレートに <script type="text/javascript" src="/vendor.xxxx.js"></script>を追加します。

エンド

これは、問題を解決します。しかし、すでにこれを処理するプラグインがあるかどうかはわかりません。それとも良い方法がありますか？

Answer 1

のWebPACKでは、あなたの設定ファイルでなど

現在のスコープライブラリ、オブジェクトに公開するexpose-loaderを使用することができ、あなたがウェブを作成している考えると、この

module: { 
    rules: [ 
    { 
    test: require.resolve('vue'), 
    use: [ 
     { 
     loader: 'expose-loader', 
     options: 'Vue' 
     } 
    ] 
    }, 
    { 
    test: require.resolve('vuex'), 
    use: [ 
     { 
     loader: 'expose-loader', 
     options: 'Vuex' 
     } 
    ] 
    } 
    ] 
} 

を追加することができます範囲はwindowになります。私はそれが願っています