HtmlWebpackPlugin은 루트가 아닌 웹 사이트 경로를로드 할 때 중단되는 상대 경로 파일을 삽입합니다.

116

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>

— Aherriot
소스

199

웹팩 구성에서 publicPath를 설정해보십시오.

output.publicPath = '/'

HtmlWebpackPlugin은 publicPath를 사용하여 주입의 URL을 앞에 추가합니다.

또 다른 옵션은 <head>html 템플릿 의 기본 href를 설정 하여 문서에있는 모든 상대 URL의 기본 URL을 지정하는 것입니다.

<base href="http://localhost:3000/">

— Magnus Sjungare
소스

7

감사합니다. 추가 output.publicPath = '/'가 해결책이었습니다.

— aherriot

3

역방향 프록시 뒤에서 실행중인 경우 작동하지 않습니다.

— t-my

4

<base href="https://stackoverflow.com/">HTML 템플릿에 호스트 이름을 하드 코딩하거나 변수를 삽입하지 않아도되도록 간단히 사용할 수 있습니다 .

— Rafa

내 사이트는 IIS와 가상 디렉터리를 사용하는 ASP.Net MVC 프로젝트이므로 publicPath = ''를 설정하고 <base href = "~ / dist /">를 추가해야했습니다.

— 더 긴급한 농담

16

사실, 나는 넣어야했다 :

output.publicPath: './';

비 ROOT 경로에서 작동하도록하기 위해. 동시에 나는 주사했다 :

   baseUrl: './'

으로

<base href="<%= htmlWebpackPlugin.options.metadata.baseUrl %>">

두 매개 변수를 모두 설정하면 마치 매력처럼 작동했습니다.

— 케빈 퐁텐 느
소스

이것은 URL브라우저에 https://localhost/myproject/%3C%=%20htmlWebpackPlugin.options.baseUrl%20%%3E#/project/1. 이 문제를 해결할 방법이 있습니까?

— NehaM

baseUrl: '.'HtmlWebpackPlugin 옵션에서 어디에 설정 하고 있습니까? { meta: { baseUrl: './' } }?

— SomethingOn

@SomethingOn 지금은이 웹팩 프로젝트가 없으며이 답변을 게시 한 이후로 많은 것이 변경되었다고 생각합니다 (기본값 포함). 그렇습니다. 이것은 확실히 설정해야하는 곳이지만 './'올바른 값입니다.

— Kevin FONTAINE

1

이제 기본 태그를 직접 삽입 할 수 있습니다. 기본 태그 삽입

— Liang

2

웹팩 구성에서

config.output.publicPath = ''

index.html에서

<base href="/someurl/" />

해야합니다.

— 한나 드 리만
소스