Question

我喜欢使用webpack 3中的import命令动态导入块的功能。不幸的是，似乎只有在服务器上的资源处于相当静态的目录配置中时才能使用它。

在我的环境中，html页面在后端动态生成（比方说http:/localhost/app）。所有其他资源（js，css，图像等）都在不同的目录中（比方说http:/localhost/res），但另外res不是静态的，而是可以在后端动态更改。

只要我不使用任何动态导入，一切都按预期工作，但是当尝试动态加载任何块时，这会失败，因为默认情况下webpack要求块在http:/localhost/app并且我不能使用{{1}因为资源所在的网址是动态的。

是否有任何方法（运行时）将webpack配置为相对于当前资源所在的路径加载资源。例如，如果位于publicPath中的块page1.js动态加载块http:/localhost/resA，则应在sub1.js而不是http:/localhost/resA中查找它。

生成的HTML将在http:/localhost/app：

上提供

http:/localhost/app/page1

档案<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <script src="http:/localhost/resA/page1.bundle.js"></script> </body> </html>将以src/page1.js的形式提供：

http:/localhost/resA/page1.bundle.js

档案import(/* webpackChunkName: "sub1" */ './sub1').then(({MyClass}) => {/*...*/});将以src/sub1的形式提供：

http:/localhost/resA/sub1.bundle.js

file`webpack.config.js'：

export class MyClass {};

Answer 1

解决方案是使用https://webpack.js.org/guides/public-path中描述的__webpack_public_path__。

Answer 2

我可以建议使用我创建的插件https://github.com/agoldis/webpack-require-from来操纵动态导入的网址

由于静态publicPath

2 个答案: