웹 팩 에 대하 여

1. 웹 팩 의 개념
본질 적 으로 웹 팩 은 현대 자 바스 크 립 트 응용 프로그램의 정적 모듈 패키지 도구 이다.웹 팩 이 프로그램 을 처리 할 때 내부 에 의존 도 (dependency graph) 를 구축 합 니 다. 이 의존 도 는 프로젝트 에 필요 한 모든 모듈 을 매 핑 하고 하나 이상 의 bundle 을 생 성 합 니 다.
 
2. Webpack 의 구축 절차
먼저 파 라 메 터 를 초기 화하 고 컴 파일 한 다음 입구 파일 부터 loader 를 호출 하여 모듈 을 번역 하고 모듈 을 포함 하 는 chunk 로 조립 한 다음 chunk 를 파일 로 변환 하여 파일 시스템 에 출력 합 니 다.
 
3. 웹 팩 의 포장 원리
모든 의존 도 를 bundle. js 파일 로 포장 하고 코드 를 통 해 유닛 세 션 으로 나 누 어 필요 에 따라 불 러 옵 니 다.
 
4. 입구 (entry)
입구 기점 (entry point) 에서 웹 팩 에 원본 파일 이 무엇 인지 알려 줍 니 다.이 원본 파일 을 찾 은 후에 의존 패키지 와 각종 자원 을 찾기 시 작 했 습 니 다. 이 패키지 와 자원 에 따라 적당 한 loader 를 선택 하여 처리 합 니 다.이 입 구 는 웹 팩 의 설정 파일 (webpack. config. js) 에서 설명 해 야 합 니 다.

module.exports = {
  entry: './path/to/my/entry/file.js'
};

 
5. 출구 (output)
출구 (output) 는 웹 팩 이 각종 loader 처 리 를 거 친 파일 을 어느 디 렉 터 리 로 생 성 해 야 하 는 지, 즉 파일 이 있 는 곳 으로 생 성 해 야 하 는 지 알려 줍 니 다.마찬가지 로 웹 팩 에 알려 줄 프로필 (webpack. config. js) 을 표시 해 야 합 니 다.

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
}

 
6. loader (로 더)
구축 과정 은 원생 의 자 바스 크 립 트 를 처리 하 는 것 외 에 다른 비 자 바스 크 립 트 파일 (그림, CSS, ES6 등) 을 처리 해 야 한다.웹 팩 loader 의 역할 은 하나의 메커니즘 을 제공 하여 모든 유형의 자원 을 대응 하 는 loader 로 처리 할 수 있 도록 하 는 것 이다. 그러면 웹 팩 은 더욱 복잡 한 구축 과정 을 완성 할 수 있다.이 loader 도 설정 파일 (webpack. config. js) 에서 정의 해 야 합 니 다.

const path = require('path');

const config = {
  output: {
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }
};

module.exports = config;

 
7. plugins (플러그 인)
loader 는 일부 자원 형식의 모듈 을 변환 하 는 데 사용 되 며, 플러그 인 은 더 넓 은 작업 을 수행 할 수 있 습 니 다.플러그 인의 범 위 는 포장, 최적화, 압축, 환경 변 수 를 다시 정의 하 는 것 을 포함한다.플러그 인 인터페이스 기능 이 매우 강해 서 각종 임 무 를 처리 할 수 있 습 니 다.
플러그 인 을 사용 하려 면 먼저 require 를 사용 한 다음 plugins 배열 에 추가 해 야 합 니 다.대부분의 플러그 인 은 옵션 (option) 을 통 해 사용자 정의 할 수 있 습 니 다.하나의 프로필 에서 서로 다른 목적 으로 같은 플러그 인 을 여러 번 사용 할 수도 있 습 니 다. 이 때 는 new 연산 자 를 사용 하여 인 스 턴 스 를 만들어 야 합 니 다.

const HtmlwebpackPlugin = require('html-webpack-plugin'); //    npm   
const webpack = require('webpack'); //         

const config = {
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new HtmlwebpackPlugin({ template: './src/index.html' })
  ]
};

module.exports = config;

 
8. 모델
웹 팩 에는 두 가지 상태 가 존재 합 니 다. 개발 모델 (development), 생산 모델 (production)
구축 하 는 과정 에서 개발 환경 은 신속 한 구축 이 필요 하고 생산 환경 에서 온라인 환경 에 가장 부합 되 는 버 전 을 구축 해 야 한다.설정 파일 (webpack. config. js) 에서 간단하게 설정 하면 완 료 됩 니 다.

module.exports = {
  mode: 'production'
}