wepack scope hosting
背景
有一次在使用webpack
构建组件项目时,需要动态指定publicpath
,类似如下的代码:
构建后,在运行态下,发现模块A中,并没有应用动态指定的publicPath。查看了构建后的资源:
可以明显看到,模块A被提升到了 指定publicPath的前面,这就导致了A中的path并没有生效。查阅了webpack的官方文档,也验证了这一点:
就是说,如果你使用了ES6 Module
导入了你的入口文件,那么 __webpack_public_path__
的声明将会在import
之后。所以为了避免出现问题,可以将__webpack_public_path__
的声明放在单独的文件中,然后导入到程序入口。
为了验证这个问题,尝试了下使用AMD
来引入模块A
:
构建之后:
可以发现,在使用AMD模块化的时候,模块A并没有被提升。
那为什么在使用ES6 module的时候,会被提升呢?