웹 팩 의 설정 파일 entry 와 output 를 자세히 설명 합 니 다.

2460 단어 webpackentryoutput
본 고 는 웹 팩 의 프로필 entry 와 output 를 소개 하 였 으 며,구체 적 으로 다음 과 같 습 니 다.
웹 팩.config.js 에서 entry 는 유일한 입구 파일 입 니 다.

entry 도 하나의 배열 일 수 있 습 니 다.

하나의 배열 이 라면,배열 안의 파일 을 함께 bundle.js 로 포장 합 니 다.
entry 도 하나의 대상 이 될 수 있다.

만약 output 에 filename 이 세 개의 값 이 있다 면:
[name]파일 이름 입 니 다.entry 의 키 입 니 다.
[hash]md5 암호 화 값 입 니 다.
[chunkhash]여 기 는 버 전 번호 로 사 용 됩 니 다.

파일 을 수정 하고 실행 할 때마다 chunkhash 값 과 다른 hash 를 생 성하 여 온라인 시 정적 자원 의 버 전 관 리 를 편리 하 게 합 니 다.
파일 이름 이 실 행 될 때마다 변 하면 파일 이 도 입 된 이름 도 달라 져 야 합 니 다.install html-webpack-plugin 플러그 인 을 사용 하여 npm install html-webpack-plugin--save-dev 를 설치 합 니 다.
완료 후 webpack.config.js 파일 에 plugins 키 추가:

plugins 의 값 은배열입 니 다.안의 값 은 모두 new html WebpackPlugin()입 니 다.매개 변 수 는 하나의 설정 배열 입 니 다.다음 과 같 습 니 다.
title:페이지 를 만 드 는 title 요소
  • filename:출력 된 HTML 파일 이름 은 기본적으로 index.html 이 고 하위 디 렉 터 리 를 직접 설정 할 수 있 습 니 다
  • template:템 플 릿 파일 경로,로드 지원,예 를 들 어 html!/index.html
  • inject: true | 'head' | 'body' | false  ,모든 자원 을 특정한 template 나 template Content 에 주입 합 니 다.true 나 body 로 설정 하면 모든 javascript 자원 은 body 요소 의 아래쪽 에 놓 이 고'head'는 head 요소 에 놓 입 니 다
  • favicon:출력 된 HTML 파일 에 특정한 favicon 경 로 를 추가 합 니 다
  • minify:{}|false,html-minifier 옵션 을 minify 에 게 전달 합 니 다
  • hash:true|false,true 라면 유일한 웹 팩 컴 파일 hash 를 포함 하 는 모든 스 크 립 트 와 CSS 파일 에 추가 하여 cache 를 해제 하 는 데 유용 합 니 다
  • cache:true|false,true 라면 기본 값 입 니 다.파일 수정 후에 만 파일 을 발표 합 니 다
  • showErrors:true|false,true 라면 기본 값 입 니 다.오류 정 보 는 HTML 페이지 에 기 록 됩 니 다
  • chunks:일부 블록 만 추가 할 수 있 습 니 다(예 를 들 어 유닛 테스트 블록 만)
  • chunks Sort Mode:제어 블록 이 페이지 에 추가 되 기 전의 정렬 방식 을 허용 합 니 다.지원 하 는 값:'none'|'default'|{function}-default:'auto'
  • excludeChunks:일부 블록 을 뛰 어 넘 을 수 있 습 니 다.(예 를 들 어 유닛 테스트 블록 을 뛰 어 넘 는 것)
  • 최종 생 성

    이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

    좋은 웹페이지 즐겨찾기