使用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解决，然后在代码中引用的地方使用。