1
webpack 3에서 import 명령을 사용하여 청크를 동적으로 가져 오는 기능을 좋아합니다. 불행히도 리소스가 정적 인 디렉토리 구성에있는 경우에만 사용할 수있는 것처럼 보입니다. 서버에.정적 publicPath 때문에 webpack 동적 가져 오기를 사용할 수 없습니다.
제 환경에서 html 페이지가 백엔드에서 동적으로 생성되었습니다 (예 : http:/localhost/app). 다른 모든 리소스 (js, css, images 등)는 다른 디렉토리에 있습니다 (예 : http:/localhost/res). res은 정적이 아니고 백엔드에서 동적으로 변경 될 수 있습니다.
http:/localhost/app에있을 것으로 예상하기 때문에 동적으로 실패 어떤 청크를로드 할 때 나는 URL 때문에
publicPath를 사용할 수 없기 때문에 모든 작품 동적 수입을 사용하지 않는 한
경우 자원 있습니다.
webpack이 현재 자원이있는 경로를 기준으로 자원을로드하도록 (런타임) 구성 할 수있는 방법이 있습니까? http:/localhost/resA에있는 page1.js 청크가 동적으로 청크 sub1.js을로드하는 경우 http:/localhost/app 대신 http:/localhost/resA에서 찾아야합니다.
생성 된 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;