webpack publicPath - 使用不同的 url 来重用 bundle

Question

给定以下场景。

一个 webpack 构建生成 3 个包，一个 CI 像这样将它们发布到 CDN(每个构建 ID 生成一个新文件夹):

www.cdn.com/1/application.js
www.cdn.com/1/chunk-a.js
www.cdn.com/1/chunk-b.js

现在，考虑下一个构建产生:

www.cdn.com/2/application.js
www.cdn.com/2/chunk-a.js
www.cdn.com/2/chunk-b.js

这些文件中的一些可能是相同的，假设除了 application.js 没有任何变化。我们有一个生成 manifest 的脚本，它只是比较这两个构建并生成:

{
  files: [
    'www.cdn.com/1/chunk-a.js', 
    'www.cdn.com/1/chunk-b.js', 
    'www.cdn.com/2/application.js'
  ]
}

---

我们想 Hook webpack block 加载器策略并从构建 1 加载 block ，因为没有理由使任何客户端缓存无效。

更具体地说，我们想要对发布进行修补，以便我们可以尽可能地重用静态 Assets 。

---

我们想要一个钩子(Hook)来检索请求并返回一个 url，然后 webpack 将使用它来加载 Assets ，比如:

interface Hook {
  (chunk: string): string
}

hook('chunk-a') => 'www.cdn.com/1/chunk-a.js'
hook('chunk-b') => 'www.cdn.com/1/chunk-b.js'
hook('application.js') => 'www.cdn.com/2/application.js'

---

1. webpack feature request to use __webpack_public_path__

Answer 1

截至 2019 年 8 月，目前无法使用 webpack@4。拉取请求已合并到 webpack@next 中，并将提供一个功能，说明如何在 webpack@5 中生成 url。

__webpack_get_script_filename__ = (asset: string) => string 

https://github.com/webpack/webpack/pull/8462