我很欣赏在webpack 3中使用
在我的环境中,后端动态生成HTML页面(假设为
只要我没有使用任何动态导入,一切都按预期工作。但是,当尝试动态加载任何代码块时,这将失败,因为webpack默认情况下期望代码块在
是否有任何方法在运行时配置webpack以相对于当前资源所在的路径加载资源?例如,如果位于
生成的HTML将可在
import
命令动态导入代码块的能力。但不幸的是,只有当服务器上的资源在相当静态的目录配置下时,它才能被使用。在我的环境中,后端动态生成HTML页面(假设为
http:/localhost/app
)。所有其他资源(js、css、图像等)都在另一个目录中(假设为http:/localhost/res
),但此外,res
并不是静态的,而是可以在后端动态变化。只要我没有使用任何动态导入,一切都按预期工作。但是,当尝试动态加载任何代码块时,这将失败,因为webpack默认情况下期望代码块在
http:/localhost/app
中,并且我不能使用publicPath
,因为资源所在的URL是动态的。是否有任何方法在运行时配置webpack以相对于当前资源所在的路径加载资源?例如,如果位于
http:/localhost/resA
中的代码块page1.js
动态加载了代码块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;