使用webpack和使用webpack的庫

Question

場景：我有一個使用webpack構建myApp.js的應用程序，我需要使用externalLibrary.js，它是使用webpack構建的庫。

1. 我可以同時包括它們兩個嗎？ （我假設的WebPack引導將有效地被載入兩次 - 那是一個問題）

   <script src="externalLibrary.js"></script> 
   <script src="myApp.js"></script> 
   

2. 如果我做這樣的事情在對myApp var externalLib = new ExternalLibrary()，以及對myApp和externalLibrary都使用jQuery或其他一些第三方庫;我的軟件包是否包含externalLibrary（考慮它的webpack配置？）並且做樹和任何事情？ jQuery代碼是否會被複制或僅包含externalLibrary和myApp的代碼需求？

如何在我的應用程序中使用webpack，並使用使用webpack構建的外部庫？是我的代碼和庫代碼共享一個依賴項，是依賴項加載一次還是兩次？

Answer 1

我想詳細回答你的問題，需要多一點信息：

• 你相同的WebPack項目/實例內建立外部庫或者是不同的項目，它有自己的WebPack配置？

• 外部庫是否在您的package.json中引用爲依賴關係？或直接嵌入您的項目中（例如，在自己的文件夾中）？

下面幾點可以幫助你已經：

• 如果你var externalLib = new ExternalLibrary()幾次，它會創建一個ExternalLibrary的幾個實例。這不是Webpack的責任，而是您的代碼。如果只想實例化一次，則創建一次並在任何地方引用它。 Webpack的功能是確保該庫的構造函數僅包含在您的myApp.js中，當您執行const ExternalLib = require('external-lib')時。

• 默認情況下，Webpack只會註釋死代碼，但不會刪除它（樹震動），除非您使用像UglifyJSPlugin，as shown in the docs這樣的插件。

• 如果你使用相同的文件多次（即甚至其他包克require('jquery')首先由他們的「主」文件在內），將只有一次通過的WebPack解決，然後在代碼中引用的地方使用。