如何让Webpack 2将块写入多个应用程序共享的位置？

Question

Webpack允许您split code into chunks，以便一个应用的不同部分可以有选择地请求共享代码。但乍一看，Webpack似乎并没有将代码分成在多个应用程序之间共享到指定位置。

假设我有两个包含相同依赖关系的包A和B，我将代码拆分为应用程序代码，业务内部共享代码和供应商代码。如果我使用相同的Webpack配置来构建这两个应用程序（使用内容哈希使这个有趣），我将会得到这个：

A/
    A-b612[...].js
    shared-a8fe[...].js
    vendor-9eaa[...].js
    index-24ac[...].html
B/
    B-77fe[...].js
    shared-a8fe[...].js
    vendor-9eaa[...].js
    index-cab4[...].html

我想要的时候：

shared/
    shared-a8fe[...].js
    vendor-9eaa[...].js    
A/
    A-b612[...].js
    index-24ac[...].html # <script> for chunks point to public URL for /shared 
B/
    B-77fe[...].js
    index-cab4[...].html # Ditto

似乎Webpack并没有处理这个用例，因为所有关于代码拆分，多个入口点和块的讨论都独立地应用于应用程序，而不是作为平台的一部分。

如果我将公共代码构建为完全独立的包或使用resolve.alias，那仍然无法解决问题，因为每个应用程序仍然会获得该块的副本。

有没有办法配置Webpack 2来构建多个应用程序，使得公共代码独立于应用程序存在，并且不会为每个应用程序复制该代码？

Answer 1

根据Webpack关于Externals的说明，解决方案似乎是authoring libraries。从Webpack文档中，强调我的：

  

externals配置选项提供了一种从输出包中排除依赖关系的方法。相反，创建的bundle依赖于依赖关系在消费者的环境中出现。

这允许您创建一个库，在您的应用程序中单独在Webpack中构建它，然后告诉您与Webpack捆绑的应用程序将这些其他bundle作为依赖项以稍微不同的方式处理，具体取决于它们的模块类型以及它们是否有一个全局变量保存接口。

在这种情况下，缓存清除不太清楚，因为创建Webpack库需要setting the main key in package.json，并且为每个新哈希手动执行操作会很麻烦。