Webpack의 "publicPath"는 무엇을합니까?

250

웹팩 문서 상태 output.publicPath:

output.path자바 스크립트의보기에서.

이것이 실제로 무엇을 의미하는지 자세히 설명해 주시겠습니까?

Webpack이 결과를 출력 해야하는 위치를 사용 output.path하고 output.filename지정하지만 무엇을 넣을 output.publicPath것인지 , 그리고 필요한지 확실하지 않습니다.

module.exports = {
  output: {
    path: path.resolve("./examples/dist"),
    filename: "app.js",
    publicPath: "What should I put here?"   
  } 
}
javascript  webpack 
— 미샤 모로 시코
소스
17
이 질문에 추가하고 싶습니다 : 언제 사용 path하고 언제 사용 publicPath하시겠습니까?
— 22:18에
1
— mqklin
— talabes
6
개발팀의 누군가가 깨어나야합니다. 많은 사람들이이 질문을합니다
— Royi Namir
— Eliran Malka

답변:

133

output.path

모든 출력 파일을 저장할 로컬 디스크 디렉토리 (절대 경로) .

예: path.join(__dirname, "build/")

Webpack은 모든 것을 localdisk/path-to-your-project/build/

output.publicPath

번들 파일을 업로드 한 위치 (서버 루트에 상대적)

예: /assets/

서버 루트에 앱을 배포했다고 가정합니다 http://server/.

를 사용 /assets/하면 앱에서 웹팩 자산을 찾을 수 http://server/assets/있습니다. 기본적으로 웹팩에서 발생하는 모든 URL은 " /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)

— 케빈로
소스
65

브라우저에서 실행될 때 웹팩은 생성 된 번들을 호스팅 할 위치를 알아야합니다. 따라서 추가 코드 청크 ( 코드 분할 사용시 ) 또는 파일 로더 또는 URL 로더 를 통해로드 된 참조 파일 을 요청할 수 있습니다. 각각 있습니다.

예를 들어, 생성 된 번들을 호스팅하도록 http 서버를 구성하는 경우 /assets/다음을 작성해야합니다.publicPath: "/assets/"

— 요하네스에 발트
소스
3
자산 폴더가 어디에 있는지 알려주시겠습니까? 자산 폴더 안의 파일을보고 싶습니다. 감사합니다.
— gauti
53

publicPath는 개발 목적으로 만 사용됩니다., 나는이 구성 속성을 처음 보았을 때 혼란 스러웠 지 만, 잠시 동안 webpack을 사용한 것이 합리적입니다.

모든 js 소스 파일을 src폴더 아래에 놓고를 ​​사용하여 소스 파일을 dist폴더 에 빌드하도록 webpack을 구성 한다고 가정하십시오 output.path.

그러나 정적 자산을와 같은보다 의미있는 위치에 제공하려고합니다. webroot/public/assets이번에는 사용할 수 out.publicPath='/webroot/public/assets'있으므로 html에서 js를 참조 할 수 있습니다 <script src="/webroot/public/assets/bundle.js"></script>.

당신은 요청할 때 webroot/public/assets/bundle.js(가) webpack-dev-serverdist 파일 폴더 아래의 js를 찾을 수

최신 정보:

Charlie Martin이 내 답변을 수정 해 주셔서 감사합니다.

독창적 : publicPath는 개발 목적으로 만 사용됩니다. 이것은 개발 목적 만을위한 것이 아닙니다.

아니요,이 옵션은 dev 서버에서 유용하지만 프로덕션 환경에서 스크립트 번들을 비동기 적으로로드하기위한 것입니다. 매우 큰 단일 페이지 애플리케이션 (예 : Facebook)이 있다고 가정하십시오. Facebook은 홈페이지를로드 할 때마다 모든 자바 스크립트를 제공하고 싶지 않으므로 홈페이지에 필요한 것만 제공합니다. 그런 다음 프로필로 이동하면 해당 페이지에 대한 추가 자바 스크립트가 ajax와 함께로드됩니다. 이 옵션은 서버에서 번들을로드 할 위치를 알려줍니다

— 션
소스
1
@jhnns의 답변은 개발자 전용이 아니라 로더 출력에 미치는 영향을 설명합니다.
— Wen
그렇지 않나요? 이 속성은 로더와 미들웨어에게 실제 자산을 찾을 수있는 곳을 알려줍니다. 생산 환경에서 webpackmiddleware 또는 webpack-dev-server를 사용하지 않을 것이므로 이것이 개발 환경에만 해당한다고 생각합니다 .webpack.github .io / docs / webpack-dev-server.html
— Sean
1
이 webpack.github.io/docs/configuration.html#output-publicpath 에서이 옵션은 미들웨어뿐만 아니라 생성 된 파일의 올바른 URL 또는 자산 경로를 채우도록 webpack에 지시하는 것으로 보입니다. dev 서버를 실행할 때 미들웨어가 publichPath요청을 가로 채고 메모리 내 파일을 반환하려고합니다.
— Wen
정확히는 프로덕션 환경에서 webpack -p자산을 빌드하는 데 사용 하며 자산은 웹팩 서버 또는 웹팩 미들웨어 대신 애플리케이션 서버 또는 nginx 서버에서 제공해야 하므로이 구성은 더 이상 프로덕션 환경에서 유용하지 않습니다. ?
— Sean
7
아니요,이 옵션은 dev 서버에서 유용하지만 프로덕션 환경에서 스크립트 번들을 비동기 적으로로드하기위한 것입니다. 매우 큰 단일 페이지 애플리케이션 (예 : Facebook)이 있다고 가정하십시오. Facebook은 홈페이지를로드 할 때마다 모든 자바 스크립트를 제공하고 싶지 않으므로 홈페이지에 필요한 것만 제공합니다. 그런 다음 프로필로 이동하면 해당 페이지에 대한 추가 자바 스크립트가 ajax와 함께로드됩니다. 이 옵션은 서버에서 번들을로드 할 위치를 알려줍니다.
— Charlie Martin
19

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가 참조하는 virtual bundle.js 파일과 함께 가상 자산 폴더를 작성했습니다. localhost : 8080 / assets / bundle.js로 이동하여 애플리케이션에서 이러한 파일을 체크인하여이를 테스트 할 수 있습니다. webpack-dev-server를 실행할 때만 생성됩니다.

— 이삭 박
소스
좋은 설명이지만, 프로덕션으로 옮기거나 직접 빌드 /build/bundle.js하면 파일 src에서 index.html파일을 올바르게 변경해야 합니까?
— ArchNoob
답장을 늦게 보내서 미안해. src를 변경할 필요가 없습니다. 프로덕션 또는 개발 환경에 관계없이 webpack은 출력 경로에 bundle.js를 만듭니다. 위의 예에서는 /build/bundle.js입니다.
— Isaac Pak
감사 src합니다. index.html 파일 의 줄에 대해 묻고 있습니다. 현재 "assets/bundle.js"번들이 출시 될 프로덕션으로 이동 "build/bundle.js"하면 html src 줄에서로 변경해야합니다 src="build/bundle.js". 아니면 더 자동화 된 방법이 있습니까?
— ArchNoob
2
귀하의 질문을 이해합니다. 예, 프로덕션을 위해 src를 build / bundle.js로 변경해야합니다. 이 작업을 자동화하는 방법은 확실하지 않습니다. 다른 사람들은 두 개의 다른 webpack.config.js 파일을 제작 용과 개발 용으로 만드는 것을 보았습니다. 아마도 if (ENV === production)과 같은 방법이있을 것입니다 ...하지만 나는 시도하지 않았습니다.
— Isaac Pak
@ArchNoob 지금 프로덕션에서이 작업을 수행하는 방법에 대해 간략히 설명합니다. src 값을 변경하지 않고 대신 publicPath 값을에서 (으) /assets/로 변경 했습니다 /build. 이렇게하면 index.html을 변경할 필요가 없습니다. 또한 index.html을 빌드 폴더에서 응용 프로그램의 루트로 옮겼습니다.
— Isaac Pak
15

내 경우에는 cdn이 있고 처리 된 모든 정적 파일 (js, imgs, fonts ...)을 내 cdn에 배치하고 URL이 http://my.cdn.com/

따라서 HTML의 원래 참조 URL 인 js 파일이 './js/my.js'인 경우 프로덕션 환경에서 http://my.cdn.com/js/my.js 가 되어야 합니다.

이 경우 내가해야 할 일은 publicpath를 http://my.cdn.com/으로 설정 하고 webpack은 자동으로 해당 접두사를 추가하는 것입니다

— 켄트 우드
소스
내 경우에는 접두사를 추가하지 않는 것 같습니다.
— Param Singh
14

파일 이름은 지정 파일의 이름 되는 모든 번들 코드 빌드 단계를 거쳐 축적받을 예정입니다.

path 는 app.js (파일 이름)가 디스크에 저장 될 출력 디렉토리를 지정합니다 . 출력 디렉토리가 없으면 webpack이 해당 디렉토리를 작성합니다. 예를 들면 다음과 같습니다.

module.exports = {
  output: {
    path: path.resolve("./examples/dist"),
    filename: "app.js"
  } 
}

그러면 myproject / examples / dist 디렉토리가 작성 되고 해당 디렉토리 아래에 app.js , /myproject/examples/dist/app.js 가 작성 됩니다. 빌드 한 후 myproject / examples / dist / app.js 로 이동하여 번들 코드를 볼 수 있습니다.

publicPath : "여기에 무엇을 넣어야합니까?"

publicPath 는 번들 파일 app.js가 제공 될 웹 서버 의 가상 디렉토리를 지정합니다 . publicPath를 사용할 때 단어 서버는 webpack-dev-server 또는 Express 서버 또는 webpack과 함께 사용할 수있는 다른 서버 일 수 있습니다.

예를 들어

module.exports = {
  output: {
    path: path.resolve("./examples/dist"),
    filename: "app.js",
    publicPath: path.resolve("/public/assets/js")   
  } 
}

이 구성은 webpack에게 모든 js 파일을 examples / dist / app.js에 묶고 해당 파일에 쓰 도록 지시 합니다.

publicPath 는 webpack-dev-server 또는 express 서버에게이 번들 파일 즉, / public / assets / js 서버의 지정된 가상 위치에서 examples / dist / app.js 를 제공하도록 지시합니다 . 따라서 html 파일 에서이 파일을 다음과 같이 참조해야합니다

<script src="public/assets/js/app.js"></script>

그래서 요약, publicPath 사이의 매핑처럼 virtual directory서버 및 output directory파일에 대한 요청을 할 때마다 output.path 구성에서 지정한 공공 / 자산 / JS가 / app.js 제공, /examples/dist/app.js 파일이 제공됩니다

— 우딥 슈레 스타
소스
2
잘 설명했다!
— Ganesh Pandey
2

publicPath는 이미지 및 글꼴 파일을 참조하기 위해 CSS에 정의 된 상대 경로를 대체하기 위해 webpack에서 사용됩니다.

— 칼리드 아잠
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.