为何浏览器环境中import.meta.url输出file://而非http://？

疑问1：浏览器环境下为何输出file://？ #

Webpack在构建阶段（运行于Node.js环境）会静态替换import.meta.url的值。它不会保留浏览器运行时动态计算该属性的逻辑，而是直接将其替换为构建时对应模块文件在本地磁盘的file://协议路径。

本质上，Webpack的打包机制是预编译模块为静态bundle，而非保留原生ES模块的运行时解析行为。打包时它处于Node环境，自然会用本地文件路径替换import.meta.url，而非留到浏览器端去生成HTTP协议的URL。

疑问2：懒加载chunk为何同样输出file://？ #

懒加载的chunk在Webpack构建流程中同样会被预编译处理。每个chunk对应的模块文件，Webpack都会在构建时遍历代码，把其中的import.meta.url替换为该chunk文件在本地构建目录中的file://路径。

哪怕是懒加载的chunk，Webpack也不会在浏览器运行时动态生成它的HTTP URL来替换import.meta.url，而是提前在构建阶段完成静态替换，这和初始bundle的处理逻辑完全一致。

获取浏览器运行时脚本HTTP URL的替代方案 #

如果需要拿到浏览器环境下脚本的实际HTTP地址，可以用以下方法：

• 使用document.currentScript.src：获取当前执行脚本的完整HTTP URL（模块顶层使用时建议放在异步逻辑或函数内）
• 结合Webpack的__webpack_public_path__：拼接chunk文件名生成完整URL，比如const chunkUrl = __webpack_public_path__ + 'chunk-name.js'
• 基于页面origin构造URL：用new URL('your-chunk-path', window.location.origin)生成符合当前环境的HTTP地址

内容的提问来源于stack exchange，提问作者Royi Namir