wepack scope hosting

背景

有一次在使用webpack构建组件项目时,需要动态指定publicpath,类似如下的代码:
wepack scope hosting
构建后,在运行态下,发现模块A中,并没有应用动态指定的publicPath。查看了构建后的资源:

wepack scope hosting
可以明显看到,模块A被提升到了 指定publicPath的前面,这就导致了A中的path并没有生效。查阅了webpack的官方文档,也验证了这一点:
wepack scope hosting
就是说,如果你使用了ES6 Module 导入了你的入口文件,那么 __webpack_public_path__ 的声明将会在import之后。所以为了避免出现问题,可以将__webpack_public_path__的声明放在单独的文件中,然后导入到程序入口。

为了验证这个问题,尝试了下使用AMD来引入模块A:
wepack scope hosting
构建之后:
wepack scope hosting
可以发现,在使用AMD模块化的时候,模块A并没有被提升。
那为什么在使用ES6 module的时候,会被提升呢?

scope hosting

wepack scope hosting

wepack scope hosting