webpack 3でimportコマンドを使用してチャンクを動的にインポートする機能が大好きです。残念ながら、リソースがかなり静的なディレクトリ構成になっている場合にしか使用できないようですサーバー上で静的パブリックパスのためwebpack dynamic importを使用できません
私の環境では、バックエンドで動的に生成されたhtmlページです（http:/localhost/appとしましょう）。その他のリソース（js、css、画像など）は別のディレクトリにありますが（http:/localhost/resとしましょう）、さらにresは静的ではなく、バックエンドで動的に変更できます。
限り、私は、動的な輸入を使用していないとすべてが期待どおりに動作しますが、動的にこれが失敗したすべてのチャンクをロードしようとしたときに、デフォルトでのWebPACKはチャンクがhttp:/localhost/appであることを期待するのでとため、URLがどこ資源私はpublicPathを使用することはできません動的です。
webpackが現在のリソースがあるパスを基準にしてリソースをロードするように（実行時に）設定する方法はありますか。 たとえば、http:/localhost/resAにあるチャンクpage1.jsが、チャンクsub1.jsを動的にロードする場合、http:/localhost/appの代わりにhttp:/localhost/resAで検索する必要があります。
<!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として利用できるようになります：
http:/localhost/app/page1で利用できるようになります生成
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;