웹 팩 입문 학습 노트 03 - 사용자 정의 스 크 립 트, 프로젝트 관리 돕 기

1. 앞 에 쓴다
앞의 두 장의 블 로그 의 기본 설명 을 통 해 우 리 는 프로젝트 를 압축 하고 컴 파일 하려 면 npx webpack 명령 을 실행 한 다음 에 웹 팩 은 설정 파일 인 웹 팩. config. js 에 따라 프로젝트 를 압축 컴 파일 할 수 있다 는 것 을 알 고 있 습 니 다.그러나 지금 우 리 는 다음 과 같은 요 구 를 만 날 수 있다.

웹 팩 의 프로필 은 웹 팩. config. js 가 아니 라 웹 팩. config. allen. js

라 고 합 니 다.

포장 컴 파일 할 때마다 npx webpack 명령 을 사용 해 야 한다.나 는 이 명령 이 마음 에 들 지 않 으 니, 나 에 게 yarn build 명령

으로 고 쳐 라.

......

모두 무리한 요구 인 것 같 지만 우리 가 프로젝트 를 구성 할 때 고려 해 야 할 문제 이다.그렇다면 이 블 로 그 는 두 가지 수 요 를 어떻게 만족 시 킬 수 있 는 지 소개 한다.
2. 웹 팩 설정 파일 지정
우선 웹 팩 의 프로필 을 지정 하면 말씀 드 리 겠 습 니 다.
앞에서 언급 한 바 와 같이 프로젝트 를 컴 파일 할 때 npx webpack 명령 을 실행 해 야 합 니 다. 그리고 웹 팩 은 웹 팩. config. js 파일 에 따라 컴 파일 됩 니 다.여기 서 말 하고 자 하 는 것 은 npx webpack 명령 은 일부 인 자 를 지정 할 수 있 습 니 다. 예 를 들 어 웹 팩 의 설정 파일 을 웹 팩. config. allen. js 로 지정 하려 면 다음 명령 을 수행 할 수 있 습 니 다.

npx webpack --config webpack.config.allen.js

위의 명령 을 통 해 우 리 는 웹 팩. config. allen. js 를 웹 팩 의 설정 파일 로 사용 하여 프로젝트 를 포장 하고 컴 파일 할 수 있 습 니 다.
3. 사용자 정의 스 크 립 트 명령
이제 두 번 째 요 구 를 해결 합 니 다. yarn build 명령 을 사용 하여 프로젝트 의 포장 컴 파일 을 하 는 방법 입 니 다.
이전 블 로그 에서 저 는 package. json 파일 의 역할 에 대해 언급 한 적 이 있 습 니 다. 그 중 하 나 는 스 크 립 트 를 사용자 정의 한 다음 npm run 이나 yarn 을 사용 하여 이 스 크 립 트 를 실행 하고 정 의 된 명령 을 수행 하 는 것 입 니 다.패키지 컴 파일 을 위해 스 크 립 트 를 사용자 정의 하 는 방식 을 사용 할 수 있 습 니 다.
새 스 크 립 트 의 절 차 는 매우 간단 합 니 다. package. json 파일 에 새 scripts 속성 을 만 듭 니 다. 이 속성 은 대상 입 니 다. 이 대상 에 속성 키 쌍 을 추가 하면 새 스 크 립 트 를 만 들 수 있 습 니 다.상기 두 번 째 수 요 를 만족 시 키 려 면 이렇게 설정 할 수 있 습 니 다.

{
  "name": "webpack-learning",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "build": "webpack --config webpack.config.allen.js"
  },
  "devDependencies": {
    "webpack": "^4.32.2",
    "webpack-cli": "^3.3.2"
  }

현재 사용자 정의 스 크 립 트 가 만 들 어 졌 습 니 다. npm run build 또는 yarn build 를 통 해 웹 팩 의 패키지 컴 파일 명령 을 수행 할 수 있 습 니 다.
4. 후기
이 블 로 그 는 프로젝트 관 리 를 돕 기 위해 스 크 립 트 를 사용자 정의 하 는 방법 을 설명 합 니 다. 웹 팩 패키지 컴 파일 을 만 드 는 스 크 립 트 만 소개 합 니 다. 다른 스 크 립 트 도 매우 유사 합 니 다. 뒤의 블 로그 에서 계속 언급 될 것 입 니 다.
모두 파 이 팅!
웹 팩 입문 학습 노트 02 - 웹 팩 프로젝트 초기 화
다음으로 전송:https://juejin.im/post/5d0a3300f265da1b725c0771