호스팅 웹 앱 webpack 번들 함께 제공

Question

webpack 종속성을 추가하는 방법을 따라했지만 브라우저에서 여전히 공백으로 표시됩니다. BUNDLE.JS, INDEX.HTML, PACKAGE.JSON, .BABELRC을 업로드 중입니다. (모든 파일 이름은 소문자입니다.)

내가 무엇을 놓치고 있는지 궁금합니다. 필자의 webpack은 루트 디렉토리에 bundle.js을 생성하고, 이제는 Firebase가 공개 디렉토리를 생성하고 배포 할 수 있도록 위에서 언급 한 모든 파일을 공용 폴더에 수동으로 넣고 있습니다. 어떤 사람이 저에게 필요한 변경 사항이 무엇인지, Firebase에 실제로 필요한 파일이 무엇인지 알려주실 수 있습니까?

Answer 1

언급 한 @ sergiomeza88도 상호 일치하는 것이 좋지만 여기에는 내 문제를 해결하고 다른 사람들에게 많은 도움이되는 몇 가지 추가 세부 정보가 나와 있습니다.

팁 1 : 당신이 중포 기지에 응용 프로그램을 배포하고 액세스 브라우저로 할 때 (특히 반작용, 돌아 오는이) 응용 프로그램이 없다는 오류가 나타날 수 있습니다 언급 한 바와 같이 그래서

can not find module "run" in bundle.js

대답 뒤에는 반드시 다음과 같은 명령을 입력해야합니다 :

npm start

이 명령은 번들을 재생성합니다. 을 포함하거나 필요하지 않습니다. 개발 중에 사용하고 있던 「실행」 모듈. 그런 다음 최신 bundle.js를 서버에 배포 할 수 있습니다.

팁 2 : 즉 /공공 새로운 디렉토리/에 path 및 publicPath을 설정해야 섹션 output:{...}내부 webpack.config 에서. 그렇지 않은 경우 Firebase 호스트에서 'public'디렉토리를 배포 할 기본 디렉토리로 언급했을 때 문제가 발생하고 응용 프로그램이 Firebase 서버에서 실행되지 않습니다.

참고 : 실제로 나는 확실하지 오전 중포 기지 내 '공공'폴더 내 루트에있는 파일을 사용하지 말하는 방법을 알고하지 않습니다하지만 난 웹팩를 출력하는 파일과 유지 기타 공공 파일을 생성 생각 (css,html) 공용 폴더 안에 있으면 좋음 firebase deploy은 루트 디렉토리에있는 다른 파일들도 업로드 할 수 있습니다. (틀 렸으면 고쳐줘).

마침내 업데이트 할 때 웹팩이 업데이트됩니다.설정 출력 값으로 : 다음

output: { path: __dirname+ '/public', publicPath: '/public/', filename: 'bundle.js' }

최신 bundle.js

npm start

를 얻기 위해 명령을 실행 (마지막으로 당신은뿐만 아니라 Tip.1으로 완료 확인하는). 마지막으로 여러분은 다음을 사용하여 가서 배포하는 것이 좋습니다.

firebase deploy

나는 마지막 배포 명령을 실행하기 전에 firebase login 및 기타 init 명령을 시작하는 초기 단계를 수행했을 수도 있습니다.

참고 : "firebase serve" 명령은 응용 프로그램이 로컬 컴퓨터에서 제대로 실행되고 있는지 디버깅하고 테스트하는 데 유용합니다. 그러면 응용 프로그램이 라이브 Firebase 서버에서도 잘 실행됩니다.

Answer 2

먼저 명령 웹팩를 실행해야합니다, 당신은를 배포

{ 
    "hosting": { 
    "public": "dist", 
    "rewrites": [ 
     { 
     "source": "**", 
     "destination": "/index.html" 
     } 
    ] 
    } 
} 

명령 중포 기지를 실행 firebase.json 내 경우에 웹팩 폴더 번들의 결과를 지적 DIST 폴더를하고 필요 응용 프로그램은 firebase init 명령에서 이전에 선택한 firebase 응용 프로그램에서 정상적으로 작동해야합니다.