새로운 Webpack 번들을 배포하면 페이지 새로 고침까지 오류가 발생합니다.

Question

React와 함께 webpack 1.x를 사용하여 응용 프로그램을 번들로 제공합니다.

output: { 
    path: __dirname + '/dist', 
    filename: 'index_bundle.[chunkhash:10].js', 
    publicPath: '/' 
}, 

이 성공적으로 응용 프로그램의 새 버전을 배포 할 때 파일 이름을 변경하는 우리의 목표를 달성 : 또한, 자바 스크립트 파일이 변경된 캐시를 체포하기 위해 우리는 우리의 출력으로 webpack.config.js에서 설정해야합니다. 그리고 성공적인 배포에서 새로운 파일이 있다는 것을 알 수 있습니다.

사용자가 배포 중에 앱을 사용할 때 주름이 나타납니다. 갑자기 한 번 밖에없는 청크가 없는데 index.html이 성공적으로 업데이트되는 동안 브라우저에서 현재 사용중인 일부 청크가 존재하지 않는 오래된 파일에 대해 잘못된 요청을합니다.

웹팩이 스위치를 처리하는 일반적인 방법이 있습니까? 또는 React 앱에서 잘못된 구성 요소 가져 오기를 정상적으로 처리하도록합니다. 우리는 존재하지 않는 파일 요청에 대해 (예 : Meteor와 마찬가지로, 나는 인상을 받고있다) S3를 호스팅하며 index.html로 돌아갑니다. Google 앱에서는 Syntax error: Unexpected token < 오류가 발생합니다. HTML이 아닌 javascript가 필요하기 때문입니다.

편집 : React 앱에서 잘못된 가져 오기를 막기 위해 경로의 index.js 파일에 논리를 적용 할 수 있습니까? 현재 내 getComponent 통화는 간단하게 다음과 같이 :

getComponent(nextState, callback) { 
    require.ensure([], (require) => { 
    callback(null, require('./components/HomePage').default); 
    }); 
} 

편집 2 :Found an answer to my issue here.

Answer 1

당신이 S3에서 오래된 파일을 삭제하지 않은 경우?

다른 chunkhash로 업로드하는 경우 오래된 해시 파일을 잠시 동안 보관할 수 있습니다.