是否有插件將指定的軟件包綁定到用作運行時的供應商文件中？

Question

爲什麼我需要這個？

例如，我想用vue，vuex，vue-router和jquery在我的WebPack項目的外部，所以提高速度和避免不必要的浪費。

爲什麼不直接使用的外部選項

因爲那需要我的html檔4個<script>標籤。但我只想將它們捆綁到一個文件中。

我目前的解決方案

捆綁單獨文件，其內容是：

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，我手動添加<script type="text/javascript" src="/vendor.xxxx.js"></script>到我的HTML模板。

end

這解決了這個問題。但我不知道是否已經有一個插件來處理這個問題。或者有更好的方法嗎？

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。我希望它可以幫助