웹 팩 가이드 - 초기 분석

원문 링크

주먹밥 아빠 시작 하 다
웹 팩 이 자바 스 크 립 트 의 modules (모듈) 를 컴 파일 하 는 데 사용 되 는 것 을 이미 알 고 있 을 것 입 니 다. 설치 에 성공 하면 CLI 나 API 형식 으로 웹 팩 을 사용 할 수 있 습 니 다. 웹 팩 의 초보 자라 면 핵심 개념 과 경쟁 품 을 읽 고 왜 웹 팩 을 사용 하 는 지 배 워 보 는 것 이 좋 습 니 다. 지역 사회 에서 도 태 된 경쟁 품 이 아 닌 웹 팩 을 사용 하 는 지 배 워 보 는 것 이 좋 습 니 다.
기본 설치
우선 폴 더 를 만 들 고 npm 로 초기 화 한 다음 로 컬 에 웹 팩 을 설치 합 니 다.

mkdir webpack-demo && cd webpack-demo
npm init -y
npm install --save-dev webpack

이제 다음 파일 디 렉 터 리 결 과 를 만 들 것 입 니 다.

webpack-demo
  |- package.json
+ |- index.html
+ |- /src
+   |- index.js

src/index.js

function component() {
  var element = document.createElement('div');

  // Lodash, currently included via a script, is required for this line to work
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  return element;
}

document.body.appendChild(component());

index.html

이 예 에서 암시 적 의존 탭 이 존재 합 니 다. 우리 index.js 파일 의존 lodash 은 실행 되 기 전에 페이지 에 포함 되 어 있 습 니 다. 이것 은 index.js 필요 하 다 고 밝 히 지 않 았 기 때 문 입 니 다 lodash. 사용 할 때 전체 변수 _ 가 존재 한다 고 가정 합 니 다.
자 바스 크 립 트 프로젝트 를 이렇게 관리 하 는 데 다음 과 같은 몇 가지 문제 가 존재 합 니 다.

외부 라 이브 러 리 에 대한 의존 성명 이 없습니다

의존 이 부족 하거나 잘못된 순 서 를 도입 하면 프로그램 이 제대로 실행 되 지 않 습 니 다

의존 이 포함 되 어 있 지만 사용 되 지 않 으 면 브 라 우 저 는 불필요 한 코드 세 션 을 강제로 다운로드 합 니 다.

자, 이제 이 문제 들 을 관리 하기 위해 webpack 를 사용 합 시다.
묶음 만 들 기
우선 디 렉 터 리 를 미세 조정 해 야 합 니 다. 배포 코드 /dist 에서 소스 코드 /src 를 분리 해 야 합 니 다. "source" 폴 더 에 저희 가 편집 한 코드 를 저장 하고 "distribution" 파일 에 구축 기 처 리 를 거 친 후 최소 화 되 고 최적화 된 output 를 저장 하면 최종 적 으로 브 라 우 저 에 불 러 옵 니 다.
project

webpack-demo
  |- package.json
+ |- /dist
+   |- index.html
- |- index.html
  |- /src
    |- index.js

index.js 에서 묶 을 수 있 도록 lodash 현재 로 컬 에 대응 하 는 라 이브 러 리 를 설치 해 야 합 니 다. 방법 은 다음 과 같 습 니 다.

npm install --save lodash

그리고 우리 script (스 크 립 트) 에 도입 합 니 다.
src/index.js

+ import _ from 'lodash';
+
  function component() {
    var element = document.createElement('div');

-   // Lodash, currently included via a script, is required for this line to work
+   // Lodash, now imported by this script
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');

    return element;
  }

  document.body.appendChild(component());

현재, 우 리 는 우리 의 script 을 묶 을 것 이기 때문에, 우 리 는 우리 의 index.html 파일 을 업데이트 해 야 합 니 다. lodash 파일 을 제거 합 니 다. 현재 우리 import 파일 은 원본 파일 을 대체 하기 위해 다른 /src 파일 을 수정 합 니 다. 다음 과 같 습 니 다.
dist/index.html

  
   
     
-    
   
   
-    
+    
   
  

이 단계 에서 index.js 에 표 시 된 로 딩 lodash 은 현재 환경 에서 _ 으로 지정 합 니 다. (여기 에는 전역 코드 오염 이 없습니다) 모듈 에 필요 한 의존 도 를 설명 함으로써 웹 팩 은 이 정 보 를 사용 하여 의존 도 를 구축 할 수 있 습 니 다. 그 다음 에 이 의존 도 를 사용 하여 최 적 화 된 묶음 을 만 들 수 있 습 니 다.(bundle, 나중에 bundle 을 사용 하여 웹 패키지 로 생 성 된 묶음 을 직접 부 릅 니 다) 이 bundle 에서 스 크 립 트 는 올 바른 순서 로 실 행 됩 니 다.
상기 설명 에 따 르 면, 우 리 는 현재 우리 의 스 크 립 트 를 입구 인터페이스 로 하고, bunlde.js 를 출력 으로 실행 합 니 다 webpack. 구체 적 인 실행 명령 은 다음 과 같 습 니 다.

./node_modules/.bin/webpack src/index.js dist/bundle.js

Hash: ff6c1d39b26f89b3b7bb
Version: webpack 2.2.0
Time: 385ms
    Asset    Size  Chunks                    Chunk Names
bundle.js  544 kB       0  [emitted]  [big]  main
   [0] ./~/lodash/lodash.js 540 kB {0} [built]
   [1] (webpack)/buildin/global.js 509 bytes {0} [built]
   [2] (webpack)/buildin/module.js 517 bytes {0} [built]
   [3] ./src/index.js 278 bytes {0} [built]

                ，                。

브 라 우 저 에서 파일 을 엽 니 다 index.html. 모든 것 이 정상 이면 다음 과 같은 텍스트 를 볼 수 있 습 니 다. 'Hello webpack'.
ES 2015 모듈
비록 import 과 export 표현 식 은 대부분의 브 라 우 저 에서 지원 되 지 않 지만, 웹 팩 은 여전히 지원 합 니 다. 그 원 리 는 웹 팩 이 실제 적 으로 이 코드 를 변환 하여 오래된 브 라 우 저가 여전히 그들 을 실행 할 수 있 도록 하 는 것 입 니 다. dist/bundle.js 파일 을 읽 으 면 웹 팩 이 어떻게 처리 하 는 지 볼 수 있 습 니 다. 그것 은 매우 정교 합 니 다.
설정 항목 사용
대부분의 항목 은 더 복잡 한 절차 가 필요 하기 때문에 웹 팩 은 설정 파일 을 지원 합 니 다. 터미널 에서 대량의 명령 행 을 사용 하 는 것 보다 설정 파일 을 사용 하 는 것 이 효율 적 입 니 다. 그래서 터미널 명령 을 대체 할 수 있 는 방법 을 만 들 겠 습 니 다. 우선 프로젝트 구 조 를 수정 하 겠 습 니 다.
project

  webpack-demo
  |- package.json
+ |- webpack.config.js
  |- /dist
    |- index.html
  |- /src
    |- index.js

webpack.config.js

var path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

이제 프로필 을 사용 하여 프로필 을 다시 실행 합 니 다.

./node_modules/.bin/webpack --config webpack.config.js

Hash: ff6c1d39b26f89b3b7bb
Version: webpack 2.2.0
Time: 390ms
    Asset    Size  Chunks                    Chunk Names
bundle.js  544 kB       0  [emitted]  [big]  main
   [0] ./~/lodash/lodash.js 540 kB {0} [built]
   [1] (webpack)/buildin/global.js 509 bytes {0} [built]
   [2] (webpack)/buildin/module.js 517 bytes {0} [built]
   [3] ./src/index.js 278 bytes {0} [built]
If a webpack.config.js is present, the webpack

웹 팩. config. js 가 존재 한다 면 webpack 명령 행 도 구 는 기본 설정 파일 로 사용 합 니 다. --config 옵션 을 사용 하면 파일 이름 을 통 해 설정 파일 을 임의로 지정 할 수 있 습 니 다. 이것 은 분할 이 필요 할 정도 로 복잡 한 항목 에 유용 합 니 다.
설정 파일 은 명령 행 보다 유연 한 기능 을 지원 합 니 다. 특정한 로드 규칙, 플러그 인, 분석 옵션 과 다른 증강 기능 을 지정 할 수 있 습 니 다. 설정 파일 문 서 를 참고 하여 더 많은 정 보 를 알 수 있 습 니 다.
NPM 스 크 립 트
명령 행 에서 웹 팩 을 실행 하 는 명령 이 비교적 긴 것 을 감안 하여 간단 한 단축 키 를 사용 할 수 있 습 니 다. 현재 package.json 파일 에 다음 npm 스 크 립 트 를 추가 할 수 있 습 니 다.

{
  ...
  "scripts": {
    "build": "webpack"
  },
  ...
}

현재 우 리 는 npm run build 명령 만 사용 하면 지루 한 웹 팩 명령 을 대체 할 수 있 습 니 다. script 에 추가 하면 로 컬 에 설 치 된 가방 을 이름 으로 참조 할 수 있 습 니 다. 전체 경 로 를 쓰 는 것 이 아니 라 webpack 직접 사용 할 수 있 습 니 다. node_modules/webpack/bin/webpack.js또한, 대부분의 npm 기반 프로젝트 가 웹 팩 명령 을 간소화 하 는 기준 이 되 었 습 니 다.
지금 우리 가 아래 의 명령 을 허락 하면, 너 는 다음 과 같은 결 과 를 볼 수 있 을 것 이다.

npm run build

Hash: ff6c1d39b26f89b3b7bb
Version: webpack 2.2.0
Time: 390ms
    Asset    Size  Chunks                    Chunk Names
bundle.js  544 kB       0  [emitted]  [big]  main
   [0] ./~/lodash/lodash.js 540 kB {0} [built]
   [1] (webpack)/buildin/global.js 509 bytes {0} [built]
   [2] (webpack)/buildin/module.js 517 bytes {0} [built]
   [3] ./src/index.js 278 bytes {0} [built]

결어
현재 당신 은 이미 기본 적 인 구축 프로젝트 를 가지 고 있 습 니 다. 이 제 는 [핵심 개념] 과 [프로필] 을 연구 하여 wepack 의 디자인 을 잘 이해 할 수 있 도록 해 야 합 니 다. API 장 은 webpack 이 제공 하 는 인 터 페 이 스 를 소개 하 는 데 전념 해 야 합 니 다. 또는 예제 학습 을 더 잘 하려 면 다음 장 에서 당신 이 직면 하 는 demo 는 기본적으로 다음 과 같은 구 조 를 바탕 으로 합 니 다.
project

webpack-demo
|- package.json
|- webpack.config.js
|- /dist
  |- bundle.js
  |- index.html
|- /src
  |- index.js
|- /node_modules