Webpack 에서 publicPath 사용 에 대한 자세 한 설명

최근 에 자신 이 웹 팩 을 기반 으로 하 는 react 프로젝트 를 구축 하고 있 는데 output.publicPath 와 웹 팩-dev-server 에서 publicPath 에 관 한 문 제 를 만 났 고 공식 문서 가 이들 에 대한 설명 도 잘 모 르 기 때문에 스스로 연구 하여 본 기록 을 썼 다.
output
output 옵션 은 웹 팩 출력 위 치 를 지정 합 니 다.그 중에서 도 중요 한 것 은 path 와 publicPath 가 자주 사용 되 는 것 입 니 다.
output.path
기본 값:process.cwd()
output.path 는 출력 을 표시 하 는 디 렉 터 리 일 뿐 절대 경로 에 대응 합 니 다.예 를 들 어 프로젝트 에서 다음 과 같은 설정 을 합 니 다.

output: {
 path: path.resolve(__dirname, '../dist'),
}

output.publicPath
기본 값:빈 문자열
4.567915.네.
웹 팩 은 매우 유용 한 설정 을 제공 합 니 다.이 설정 은 프로젝트 의 모든 자원 에 기본 경 로 를 지정 하 는 데 도움 을 줄 수 있 습 니 다.공공 경로(PublicPath)라 고 합 니 다.
이 경 로 를 어떻게 활용 하 는 지 에 대해 서 는 밝 히 지 않 았 습 니 다.
사실 여기 서 말 하 는 모든 자원 의 기본 경 로 는 프로젝트 에서 css,js,img 등 자원 을 참조 할 때의 기본 경 로 를 말 합 니 다.이 기본 경 로 는 구체 적 인 자원 에서 지정 한 경로 에 맞 춰 사용 해 야 하기 때문에 포장 한 자원 의 방문 경 로 는 다음 과 같은 공식 으로 표시 할 수 있 습 니 다.
정적 자원 최종 접근 경로=output.publicPath+자원 loader 또는 플러그 인 등 설정 경로
예컨대

output.publicPath = '/dist/'

// image
options: {
  name: 'img/[name].[ext]?[hash]'
}

//           
output.publicPath + 'img/[name].[ext]?[hash]' = '/dist/img/[name].[ext]?[hash]'

// js output.filename
output: {
 filename: '[name].js'
}
//   js      
output.publicPath + '[name].js' = '/dist/[name].js'

// extract-text-webpack-plugin css
new ExtractTextPlugin({
 filename: 'style.[chunkhash].css'
})
//   css      
output.publicPath + 'style.[chunkhash].css' = '/dist/style.[chunkhash].css'

이 최종 정적 자원 접근 경 로 는 html-webpack-plugin 을 사용 하여 포장 한 html 에서 볼 수 있 습 니 다.따라서 publicPath 를 상대 경로 로 설정 한 후 상대 경 로 는 build 후의 index.html 에 비해 설 정 됩 니 다.예 를 들 어 publicPath:'../dist/'를 설정 하면 포 장 된 js 의 인용 경 로 는'/dist/main.js'입 니 다.그러나 여기 서 문제 가 있 습 니 다.상대 경 로 는 로 컬 에 접근 할 때 사용 할 수 있 습 니 다.그러나 정적 자원 을 CDN 에 위탁 하면 방문 경 로 는 상대 경 로 를 사용 할 수 없습니다.그러나 PublicPath 를/로 설정 하면 포장 후 방문 경 로 는 localhost:8080/dist/main.js 이 며 로 컬 에 접근 할 수 없습니다.
그래서 온라인 에서 PublicPath 를 수 동 으로 변경 해 야 하 는데 불편 하지만 어떻게 해결 해 야 할 지 모 르 겠 어 요.
일반적인 상황 에서 publicPath 는'/'로 끝나 야 하 며,다른 loader 나 플러그 인의 설정 은'/'로 시작 하지 마 십시오.
웹 팩-dev-server 의 publicPath
공식 문서 에서 publicPath 에 대한 설명
개발 단계 에서 저 희 는 devserver 를 이용 하여 개발 서버 를 시작 합 니 다.여기 서도 publicPath 를 설정 합 니 다.여기 publicPath 경로 의 포장 파일 은 브 라 우 저 에서 접근 할 수 있 습 니 다.정적 자원 은 output.publicPath 를 사용 합 니 다.
웹 팩-dev-server 패키지 의 내용 은 메모리 에 저장 되 어 있 습 니 다.이 패키지 의 자원 대외 루트 디 렉 터 리 는 바로 PublicPath 입 니 다.다시 말 하면 포장 후 자원 저장 위 치 를 설정 합 니 다.
예 를 들 면:

//   devServer publicPath 
const publicPath = '/dist/'
//    devServer index.html    
const htmlPath = `${pablicPath}index.html`
//     
cosnt mainJsPath = `${pablicPath}main.js`

이상 직접 통과 가능http://lcoalhost:8080/dist/main.js방문 하 다.
방문 을 통 해http://localhost:8080/webpack-dev-server 는 devserver 가 시 작 된 자원 접근 경 로 를 얻 을 수 있 습 니 다.그림 에서 보 듯 이 정적 자원 을 누 르 면 정적 자원 의 접근 경 로 를 볼 수 있 습 니 다.http://localhost:8080${publicPath}index.html

html-webpack-plugin
이 플러그 인 은 css 와 js 를 html 모드 에 추가 하 는 데 사 용 됩 니 다.그 중에서 template 와 filename 은 경로 의 영향 을 받 습 니 다.원본 코드 에서 볼 수 있 습 니 다.
template
역할:모드 파일 의 경 로 를 정의 하 는 데 사용 합 니 다.
원본 코드:

this.options.template = this.getFullTemplatePath(this.options.template, compiler.context);

따라서 template 는 webpack 의 context 에서 만 인식 되 며,webpack context 의 기본 값 은 process.cwd()이 며,node 명령 을 실행 할 때 있 는 폴 더 의 절대 경로 입 니 다.
filename
역할:출력 된 HTML 파일 이름,기본 값 은 index.html 로 하위 디 렉 터 리 를 직접 설정 할 수 있 습 니 다.
원본 코드:

this.options.filename = path.relative(compiler.options.output.path, filename);

따라서 filename 의 경 로 는 output.path 에 비해 웹 팩-dev-server 에 서 는 웹 팩-dev-server 에 비해 설 정 된 publicPath 입 니 다.
웹 팩-dev-server 의 publicPath 와 output.publicPath 가 일치 하지 않 으 면 html-webpack-plugin 을 사용 하면 정적 자원 을 참조 하 는 데 실패 할 수 있 습 니 다.devserver 에서 도 output.publicPath 로 정적 자원 을 참조 하고 웹 팩-dev-server 가 제공 하 는 자원 접근 경로 와 일치 하지 않 아 정상적으로 접근 할 수 없습니다.
output.publicPath 가 상대 적 인 경로 인 경 우 를 제외 하고 로 컬 자원 에 접근 할 수 있 습 니 다.
따라서 일반적으로 devserver 의 publicPath 와 output.publicPath 가 일치 하도록 보장 해 야 합 니 다.
마지막.
웹 팩 의 path 에 대해 이렇게 많은 정 리 를 했 습 니 다.웹 팩 경 로 를 연구 하 는 과정 에서 찾 아 낸 경로 에 관 한 단편 적 인 지식 은 다음 과 같 습 니 다.
철봉
설정 중/url 루트 경 로 를 대표 합 니 다.예 를 들 어http://localhost:8080/dist/js/test.js적중 하 다http://localhost:8080/
devServer.publicPath & devServer.contentBase

devserver.contentBase 는 서버 에 내용 을 어디서 제공 하 는 지 알려 줍 니 다.정적 파일 을 제공 하려 면..

devserver.publicPath 는 bundle 을 어디서 제공 해 야 하 는 지 확인 하고 이 옵션 을 우선 합 니 다

node 의 경로

__dirname:실 행 된 js 가 있 는 폴 더 의 절대 경 로 를 항상 되 돌려 줍 니 다

__filename:실 행 된 js 의 절대 경 로 를 항상 되 돌려 줍 니 다

process.cwd():node 명령 을 실행 할 때 있 는 폴 더 의 절대 경 로 를 항상 되 돌려 줍 니 다.

레 퍼 런 스
공식 문서 에서 devserver.publicPath 에 대한 소 개 를 보 려 면 누 르 십시오.
웹 팩 2 의 경 로 를 자세히 알 아 보 세 요.
NodeJs 의 몇 가지 파일 경 로 를 분석 합 니 다.
웹 팩 에서 publicPath 사용 에 대한 자세 한 설명 은 여기까지 입 니 다.더 많은 웹 팩 publicPath 내용 은 저희 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 읽 어 주시 기 바 랍 니 다.앞으로 도 많은 응원 부 탁 드 리 겠 습 니 다!