웹 팩의 "public Path"는 무엇을 합니까?
웹 팩 문서에는 다음과 같이 기술되어 있습니다.output.publicPath 말합니다
output.path자바스크립트
이것이 실제로 무엇을 의미하는지 자세히 설명해 주시겠습니까?
용 i i i i를 쓴다.output.path ★★★★★★★★★★★★★★★★★」output.filename출력하는 만, 「」에 을 넣어야 잘 .output.publicPath필요한지를 확인합니다.
module.exports = {
output: {
path: path.resolve("./examples/dist"),
filename: "app.js",
publicPath: "What should I put here?"
}
}
output.path
모든 출력 파일을 저장하는 로컬 디스크 디렉토리(Absolute 경로).
예: path.join(__dirname, "build/")
은 모든 을 출력합니다.localdisk/path-to-your-project/build/
output.publicPath
번들 파일을 업로드한 장소.(절대 경로 또는 메인 HTML 파일에 대한 상대 경로)
예: /assets/
루트에 합니다.http://server/.
「」를 사용해 ./assets/은 웹 팩 를 찾을 수 http://server/assets/ 웹된 모든 "로 시작합니다./assets/
src="picture.jpg"➡➡을(를) 쓰다src="/assets/picture.jpg"대상자 ( )
http://server/assets/picture.jpg)
src="/img/picture.jpg"➡➡을(를) 쓰다src="/assets/img/picture.jpg"대상자 ( )
http://server/assets/img/picture.jpg)
브라우저에서 실행될 때 웹 팩은 생성된 번들을 호스트할 위치를 알아야 합니다.따라서 파일 로더 또는 URL 로더를 통해 로드된 추가 청크(코드 분할 사용 시) 또는 참조 파일을 각각 요구할 수 있습니다.
예를 들어 다음과 같습니다./assets/적습니다.publicPath: "/assets/"
public Path는 개발 목적으로만 사용됩니다.처음에는 이 설정 속성을 보고 혼란스러웠지만 웹 팩을 사용한 지 얼마 안 되어 의미가 있습니다.
을 js로 합니다.src 및 소스 을 "원본 파일"로 하도록 웹 합니다.dist「」가 붙은 output.path.
은 보다 있는 .webroot/public/assets에는 , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , .out.publicPath='/webroot/public/assets'에서 html js를 할 수 <script src="/webroot/public/assets/bundle.js"></script>.
시webroot/public/assets/bundle.jswebpack-dev-server folderdist 아래에 .
업데이트:
찰리 마틴이 내 대답을 고쳐줘서 고마워.
original: public Path는 개발 목적으로만 사용되는 것이 아니라 개발 목적으로만 사용되는 것입니다.
아니요. 이 옵션은 개발 서버에서 유용하지만 운영 환경에서 스크립트 번들을 비동기적으로 로드하기 위한 것입니다.예를 들어 Facebook과 같은 매우 큰 단일 페이지 응용 프로그램이 있다고 가정해 보십시오.페이스북은 홈페이지를 로드할 때마다 자바스크립트를 모두 제공하는 것이 아니기 때문에 홈페이지에서 필요한 것만 제공합니다.그런 다음 프로필로 이동하면 해당 페이지에 대한 javascript를 ajax와 함께 로드합니다.이 옵션은 서버의 해당 번들을 로드할 위치를 나타냅니다.
filename은 빌드 단계를 거친 후 번들된 모든 코드가 누적되는 파일의 이름을 지정합니다.
path는 app.disc(disc)가 디스크에 저장되는 출력 디렉토리를 지정합니다.출력 디렉토리가 없는 경우는, Web pack 에 의해서 그 디렉토리가 작성됩니다.예를 들어 다음과 같습니다.
module.exports = {
output: {
path: path.resolve("./examples/dist"),
filename: "app.js"
}
}
그러면 myproject/examples/dist 디렉토리가 생성되고 이 디렉토리 아래에 app.js, /myproject/examples/dist/app.js가 생성됩니다.빌드 후 my project/examples/dist/app.js를 참조하여 번들 코드를 확인할 수 있습니다.
public Path: "여기에 무엇을 넣을까요?"
publicPath는 번들 파일 app.js가 제공되는 웹 서버의 가상 디렉토리를 지정합니다.publicPath를 사용할 때 server라는 단어는 webpack-dev-server 또는 webpack과 함께 사용할 수 있는 express 서버 또는 기타 서버일 수 있습니다.
예를들면
module.exports = {
output: {
path: path.resolve("./examples/dist"),
filename: "app.js",
publicPath: path.resolve("/public/assets/js")
}
}
이 설정에서는 webpack에 모든 js 파일을 example/dist/app.files로 번들하고 해당 파일에 쓰도록 지시합니다.
publicPath는 webpack-dev-server 또는 express 서버에 서버 ie /public/assets/js의 지정된 가상 위치에서 examples/dist/app.js를 처리하도록 지시합니다.따라서 html 파일에서 이 파일을 참조해야 합니다.
<script src="public/assets/js/app.js"></script>
는 "public Path"의 "public Path는 public Path의 입니다.virtual directory하시는 서버 및 ""에 있습니다.output directoryoutput.path 설정으로 지정되며 파일 public/assets/js/app.js 요청이 오면 /examples/dist/app.js 파일이 처리됩니다.
publicPath를 사용하여 webpack-dev-server가 "가상" 파일을 제공할 위치를 지정할 수 있습니다.publicPath 옵션은 webpack-dev-server의 content-build 옵션과 동일한 위치가 됩니다.webpack-dev-server는 시작할 때 사용할 가상 파일을 만듭니다.이러한 가상 파일은 웹 팩이 생성하는 실제 번들 파일과 유사합니다.기본적으로 --content-base 옵션은 index.html이 있는 디렉토리를 가리킵니다.다음은 설정 예를 제시하겠습니다.
//application directory structure
/app/
/build/
/build/index.html
/webpack.config.js
//webpack.config.js
var path = require("path");
module.exports = {
...
output: {
path: path.resolve(__dirname, "build"),
publicPath: "/assets/",
filename: "bundle.js"
}
};
//index.html
<!DOCTYPE>
<html>
...
<script src="assets/bundle.js"></script>
</html>
//starting a webpack-dev-server from the command line
$ webpack-dev-server --content-base build
webpack-dev-server는 참조하는 가상 bundle.dev-server 파일과 함께 가상 자산 폴더를 만들었습니다.이것을 테스트하려면 localhost:8080/assets/bundle.js로 이동하여 어플리케이션에서 이러한 파일을 체크 인합니다.webpack-dev-server 실행 시에만 생성됩니다.
제 경우 cdn을 가지고 있으며 처리한 모든 정적 파일(http, imgs, http...)을 cdn에 저장합니다.url은 http://my.cdn.com/ 입니다.
따라서 html의 orginal refer url인 js파일이 있다면 실제 환경에서 http://my.cdn.com/js/my.js이 되어야 합니다.
이 경우 publicpath는 http://my.cdn.com/과 같게 설정하기만 하면 webpack은 자동으로 프레픽스를 추가합니다.
여기 좋은 답변들이 많으니까 집중해서 말씀드리겠습니다.output.publicPath: 'auto'.
프로젝트를 빌드할 때 다음 폴더 구조를 얻을 수 있습니다.
dist/blog/index.html
dist/app.js
dist/app.css
dist/index.html
이 경우 index.html 파일에는 app.js와 app.css(다음 자산)에 대한 올바른 경로가 필요합니다.다음 시나리오에 대해 생각해 보겠습니다.
publicPath: ''또는publicPath: '/':서버상에서 호스트 되고 있는 경우는, 양쪽 모두 Web 사이트의 루트(https://localhost:8080/ 등)를 가리키고 있기 때문에, 모든 것이 정상적으로 동작합니다.
하지만 로컬로 열어보면
blog/index.html자산에 대한 올바른 경로가 없습니다.의 경우publicPath: ''자산이 검색됩니다.blog/상대 경로가 가리키는 폴더는 상대 경로가 가리키는 위치이기 때문입니다.index.html에는 아직 자산에 대한 올바른 경로가 있습니다.그리고 만약의 경우
publicPath: '/',/는 파일 시스템의 루트를 가리키기 때문에 index.disc 파일은 둘 다 자산에 대한 올바른 경로를 가지고 있지 않습니다.publicPath: 'auto':이 경우 양쪽 index.html 파일은 자산에 대한 상대 경로를 가집니다.그렇게,
blog/index.html를 가리키다../app.css,그리고.index.html를 가리키다app.css.
webpack2 매뉴얼에서는 보다 알기 쉽게 설명하고 있습니다.https://webpack.js.org/guides/public-path/ #use-case
웹 팩에는 응용 프로그램의 모든 자산에 대한 기본 경로를 지정할 수 있는 매우 유용한 구성이 있습니다.public Path라고 합니다.
public Path는 이미지 및 글꼴파일을 참조하기 위해 css에서 정의된 상대 경로를 치환하기 위해 웹 팩에 의해 사용됩니다.
언급URL : https://stackoverflow.com/questions/28846814/what-does-publicpath-in-webpack-do
'programing' 카테고리의 다른 글
| MySQL에서 한 행을 복사하여 같은 테이블에 삽입할 수 있습니까? (0) | 2022.10.06 |
|---|---|
| 연결 배열에 항목 추가 (0) | 2022.10.05 |
| C/C++에서 가장 적합한 암호화 라이브러리는 무엇입니까? (0) | 2022.10.05 |
| 오류 2002(HY000):소켓 '/tmp/mysql'을 통해 로컬 MySQL 서버에 연결할 수 없습니다.Mac Big Sur의 양말' (2) (0) | 2022.10.05 |
| 이상한 MySQL 팝업 "Mysql 설치 프로그램이 커뮤니티 모드를 실행하고 있습니다." (0) | 2022.10.05 |