Webpack 경로와 publicPath 사용의 장점과 단점에 대한 자세한 설명
- php中世界最好的语言원래의
- 2018-05-14 13:33:101741검색
이번에는 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 폼 클래스 상위-하위 컴포넌트 데이터 전송 방법 요약
위 내용은 Webpack 경로와 publicPath 사용의 장점과 단점에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!