Webpack 경로와 publicPath 사용의 장점과 단점에 대한 자세한 설명

이번에는 Webpack 경로와 publicPath를 사용할 때의 장단점에 대해 자세히 설명하겠습니다. Webpack 경로와 publicPath 사용 시 주의 사항은 무엇인가요?

서문

webpack모듈화 개발 과정에서 webpack.config.js구성 파일의 출력 경로에 항상 경로와 publicPath가 있는 것을 발견했는데 그 의미를 모르겠습니다. .

module.exports = {
 output: {
 path: path.resolve("./examples/dist"),
 filename: "app.js",
 publicPath: "What should I put here?" 
 } 
}

Text

공식 설명

publicPath: Javascript/HTML 페이지 보기의 출력 경로입니다.

JS/HTML 페이지의 출력 경로

내 이해

output.path는 모든 출력 파일이 저장되는 로컬 파일 디렉터리입니다. (절대 경로)

예:

path.join(dirname, “build/”)

webpack은 모든 파일을 localdisk/path-to-your-project/build/

output.publicPath

Youupload에 출력합니다. 서버 루트 디렉터리)

path: 패키지된 파일을 저장하는 데 사용되는 출력 디렉터리

publicPath: 리소스 파일이 참조하는 디렉터리 지정

사용: 예를 들어 express에서는 public/dist가 다음의 루트 디렉터리로 지정됩니다. 웹 사이트의 소스 파일은 공개적으로 저장되므로 패키지 출력을 이 디렉터리에 지정하려면 "./dist" 경로를 설정해야 하며, 현재 경로를 나타내려면 publicPath를 "/"로 설정해야 합니다. .

publicPath는 웹 사이트의 루트 디렉터리 위치에 따라 달라집니다. 왜냐하면 패키지된 파일은 모두 웹 사이트의 루트 디렉터리에 있고 이러한 파일에 대한 참조는 이 디렉터리를 기반으로 하기 때문입니다. 웹 사이트의 루트 디렉터리가 public이고 참조된 이미지 경로가 './img.png'라고 가정합니다. publicPath가 '/'인 경우 이미지가 dist에 패키징되어 배치되므로 이미지를 표시할 수 없습니다. publicPath를 " /dist"로 설정합니다.

예:

/assets/

이 프로젝트를 서버 http://server/

에 배포한다고 가정합니다.output.publicPath를 /assets/로 설정하면 이 프로젝트는 http://server에 있게 됩니다. webpack 찾기 /assets/의 리소스입니다.

이 전제 하에 webpack과 관련된 모든 경로는 /assets/로 시작하도록 다시 작성됩니다.

src="picture.jpg" Re-writes ➡ src="/assets/picture.jpg"
Accessed by: (http://server/assets/picture.jpg)
src="/img/picture.jpg" Re-writes ➡ src="/assets/img/picture.jpg"
Accessed by: (http://server/assets/img/picture.jpg)

중요

스타일 로더나 CSS sourceMap을 사용하는 경우 publicPath를 설정해야 합니다. 리소스를 올바르게 로드할 수 있도록 서버 주소의 절대 경로(예: http://server/assets/)로 설정합니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

Vue 폼 클래스 상위-하위 컴포넌트 데이터 전송 방법 요약

angular+routerlink 점프 방법 요약

위 내용은 Webpack 경로와 publicPath 사용의 장점과 단점에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!