❗ 해당 문서는 지속적으로 업데이트 될 예정입니다.
❗ 잘못된 정보나 오류가 있으면 댓글로 편하게 남겨주세요!🥰
webpack 수업 도중 publicPath 설정을 똑같이 해주었는데, 이미지가 누구는 보이고, 누구는 보이지않는 혼란이 발생했다. 보이는 사람과 보이지 않는 사람의 유일한 차이점은 VSC 폴더를 어디서 열었느냐였다. VSC 폴더를 어디서 열었는지가 왜 publicPath에 영향을 주는걸까?
❗️라이브 서버의 root는 현재 창에 열려있는 폴더다
live server는 현재 vscode 창에 열려있는 폴더가 root 경로가 되기 때문에 현재 위치한 디렉토리보다 상위에 있는 파일들에 대해서는 알 수 없게 된다.
❗️public path란 빌드할 때 CSS,HTML 파일 안에 URL들을 업데이트 해주기 위한 것이다
output: {
publicPath: "/webpack/dist/",
filename: "[name].js",
path: path.resolve("./dist"),
}
“output”은 ‘path’와 ‘publicPath’ 2가지 속성을 가지는데,
path : 어디에 결과가 저장되는지에 관한 것
publicPath : 배포 빌드 할 때 Webpack plugins(ulr-loader,file-loader 같은..), CSS나 HTML파일 안에 URL들을 업데이트 해주기 위한 것(prefix개념)
따라서 빌드할 때 CSS나 HTML파일 안에 URL들을 업데이트 해주는 publicPath에 현재 root경로보다 위인 폴더를 넣어주게 되면 라이브 서버로 봤을 때는 파일들이 뜨지 않는 것이다.
예를 들어, 현재 VSC를 연 폴더보다 상위 폴더를 publicPath로 설정해둘 경우 이미지들의 url이
publicPath로 설정해둔 상위 폴더/dist/tiger.png이런식으로 이미지 경로앞에 폴더가 붙게 되는데, 이걸 라이브서버에서 볼 경우 해당 폴더를 참조할 수 없기 때문에 이미지를 못읽어오는 것이다.
그렇기 때문에 VSC를 어디에서 열었느냐에 따라 다르게 보였던 것..!
깨달은 점
👉 맨날 사용하는 익스텐션의 동작원리를 잘 모르고있었다!
다음에 해보고 싶은 시도
👉 webpack 기본 코드 손코딩해보기
👉 실무에서 webpack 사용해보기
참고자료
