[javascript] Webpack의 “publicPath”는 무엇을합니까?

JAVASCRIPT / 글쓴이

웹팩 문서 상태 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?"
  }
}

답변

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)

답변

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

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

답변

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와 함께로드됩니다. 이 옵션은 서버에서 번들을로드 할 위치를 알려줍니다

답변

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를 실행할 때만 생성됩니다.

답변

내 경우에는 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은 자동으로 해당 접두사를 추가하는 것입니다

답변

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

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 파일이 제공됩니다

답변

webpack2 문서는 이것을 훨씬 깔끔하게 설명합니다 :
https://webpack.js.org/guides/public-path/#use-cases

webpack에는 응용 프로그램의 모든 자산에 대한 기본 경로를 지정할 수있는 매우 유용한 구성이 있습니다. 이것을 publicPath라고합니다.