时间戳

首页 > 解决方案 > 如何在 Webpack 中覆盖惰性 import() 解析

javascript - 如何在 Webpack 中覆盖惰性 import() 解析

问题描述

我有一个奇怪的要求。我正在尝试为 webpack 实现一个插件，该插件可以动态解析块的 CDN 位置。我知道 publicPath 选项及其行为，但是，就我而言，这是不可能的。因为使用我们的 CDN，我们不会返回包含文件相对路径的 URL，而是返回一个我们用来创建 URL 的魔术 ID，而不管文件位置/名称如何。

例如：

/static/js/chunk.1.js -> https://cdn.example/asset/1234
main.js -> https://cdn.example/asset/1122

我可以创建一个块名称/位置映射，并且我可以在我的最终输出中包含此映射以用于运行时解析的额外包大小开销。我很难找到理想情况下覆盖默认的 webpack import() 行为。

理想情况下，相同的语法：

const chunkResult = await import('/lazy-loaded');

基本上会转化为：

const chunkResult = await load('https://cdn.example/assets/1234');

任何有关如何完成此操作的建议或“您不能这样做，请提交功能请求”都会很棒。

标签： javascriptwebpackcdn

解决方案

你可以通过__webpack_public_path__.

例如，许多解决方案都可以通过__webpack_public_path__在 CDN 的脚本标记返回错误时动态更改来提供从 CDN 到您的服务的回退。

写一个简单的：

__webpack_public_path__ = window.cdnEndpoint

webpack 会将其编译到 publicPath。

推荐阅读