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

Program / 글쓴이

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/" />

해야합니다.

답변