HtmlWebpackPlugin은 루트가 아닌 웹 사이트 경로를로드 할 때 중단되는 상대 경로 파일을 삽입합니다.
webpack과 HtmlWebpackPlugin을 사용하여 번들 된 js 및 css를 html 템플릿 파일에 삽입하고 있습니다.
new HtmlWebpackPlugin({
template: 'client/index.tpl.html',
inject: 'body',
filename: 'index.html'
}),
그리고 다음 html 파일을 생성합니다.
<!doctype html>
<html lang="en">
<head>
...
<link href="main-295c5189923694ec44ac.min.css" rel="stylesheet">
</head>
<body>
<div id="app"></div>
<script src="main-295c5189923694ec44ac.min.js"></script>
</body>
</html>
이는 앱의 루트 localhost:3000/를 방문 할 때 제대로 작동하지만 localhost:3000/items/1번들 파일에 절대 경로가 삽입되지 않았기 때문에 다른 URL에서 앱을 방문하려고하면 실패 합니다. html 파일이로드되면 /itemsreact-router가 아직로드되지 않았기 때문에 존재하지 않는 디렉토리 에서 js 파일을 찾습니다 .
HtmlWebpackPlugin이 절대 경로로 파일을 주입하도록하려면 어떻게해야하나요? Express는 내 /dist디렉토리가 아닌 루트에서 파일을 찾습니다 /dist/items/main-...min.js. 아니면 문제를 해결하기 위해 Express 서버를 변경할 수 있습니까?
app.use(express.static(__dirname + '/../dist'));
app.get('*', function response(req, res) {
res.sendFile(path.join(__dirname, '../dist/index.html'));
});
본질적으로, 나는 그저 라인을 얻을 필요가 있습니다.
<script src="main...js"></script>
소스의 시작 부분에 슬래시가 있습니다.
<script src="/main...js></script>
웹팩 구성에서 publicPath를 설정해보십시오.
output.publicPath = '/'
HtmlWebpackPlugin은 publicPath를 사용하여 주입의 URL을 앞에 추가합니다.
또 다른 옵션은 <head>html 템플릿 의 기본 href를 설정 하여 문서에있는 모든 상대 URL의 기본 URL을 지정하는 것입니다.
<base href="http://localhost:3000/">
사실, 나는 넣어야했다 :
output.publicPath: './';
비 ROOT 경로에서 작동하도록하기 위해. 동시에 나는 주사했다 :
baseUrl: './'
으로
<base href="<%= htmlWebpackPlugin.options.metadata.baseUrl %>">
두 매개 변수를 모두 설정하면 마치 매력처럼 작동했습니다.
웹팩 구성에서
config.output.publicPath = ''
index.html에서
<base href="/someurl/" />
해야합니다.
'Programing' 카테고리의 다른 글
| Jade 대신 Express에서 HTML 사용 (0) | 2020.08.23 |
|---|---|
| 내 JavaScript 함수 이름이 충돌하는 이유는 무엇입니까? (0) | 2020.08.23 |
| ESRI : 소스 맵을 구문 분석하지 못했습니다. (0) | 2020.08.23 |
| C ++ 경고 : double을 0으로 나누기 (0) | 2020.08.23 |
| 왜 큰 Django QuerySet을 반복하면 엄청난 양의 메모리를 사용합니까? (0) | 2020.08.23 |