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에 패키징되어 있으므로 이미지를 표시할 수 없습니다. " /dist"에 대한 publicPath입니다.

예:

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

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

추천 자료:

문자열에 포함된 내용을 결정하기 위해 JS를 사용하는 방법 요약

JS+HTML5 마우스 이벤트의 실제 결합 입자 애니메이션

위 내용은 Webpack 경로와 publicPath의 차이점은 구문 분석을 사용합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!