Webpack 경로와 publicPath의 차이점은 구문 분석을 사용합니다.
- php中世界最好的语言원래의
- 2018-06-01 11:39:231961검색
이번에는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!