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

Question

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

假设我有两个具有相同依赖项的包 A 和 B，其中我将代码拆分为应用程序代码、业务内部共享代码和 vendor 代码。如果我使用相同的 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 似乎无法处理这个用例，因为所有关于代码分割、多个入口点和 block 的讨论都独立应用于应用程序，而不是作为平台的一部分。

如果我将通用代码构建为完全独立的包或使用 resolve.alias ，这仍然不能解决问题，因为每个应用程序仍然获得该 block 的副本。

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

Answer 1

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

The externals configuration option provides a way of excluding dependencies from the output bundles. Instead, the created bundle relies on that dependency to be present in the consumer's environment.

这允许您编写一个库，在 Webpack 中与您的应用程序分开构建它，然后告诉您与 Webpack 捆绑的应用程序将这些其他 bundle 视为依赖项，具体取决于它们的模块类型以及它们是否有一个保存接口(interface)的全局变量。

在这种情况下，缓存清除不太清楚，因为编写 Webpack 库需要 setting the main key in package.json ，并且为每个新哈希手动执行此操作将是一件痛苦的事情。