gpt4 book ai didi

dynamic - 由于静态 publicPath 无法使用 webpack 动态导入

转载 作者:行者123 更新时间:2023-12-04 19:28:58 25 4
gpt4 key购买 nike

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

在我的环境中,html 页面在后端动态生成(假设 http:/localhost/app )。所有其他资源(js、css、图像等)都在不同的目录中(比如 http:/localhost/res),但另外还有 res不是静态的,而是可以在后端动态更改。

只要我不使用任何动态导入,一切都按预期工作,但是当尝试动态加载任何块时,这会失败,因为 webpack 默认情况下期望块位于 http:/localhost/app 中。我不能使用 publicPath因为资源所在的 url 是动态的。

有没有办法(运行时)配置 webpack 以加载相对于当前资源所在路径的资源。
例如,如果块 page1.js位于 http:/localhost/resA动态加载块 sub1.js他应该在 http:/localhost/resA 中寻找它而不是 http:/localhost/app .

生成的 html 将在 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 提供:
export class MyClass {};

文件`webpack.config.js':
const path = require('path');
const webpack = require('webpack');

function config(env) {
return {
entry: {
index: ['./src/page1.js']
},
output: {
filename: '[name].bundle.js',
chunkFilename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
publicPath: './'
},
module: {
rules: [
{
test: /\.js$/i,
include: /src/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
},
devtool: 'source-map'
};
}

module.exports = config;

最佳答案

解决方法是使用__webpack_public_path__https://webpack.js.org/guides/public-path 中所述.

关于dynamic - 由于静态 publicPath 无法使用 webpack 动态导入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47621905/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com