Webpack이란?

• 여러개 파일을 하나의 파일로 합쳐주는 번들러(bundelr)
• 하나의 시작점(entry point)로부터 의존적인 모듈을 전부 찾아내서 하나의 결과물을 만들어 낸다.

설치

$ npm i -D webpack webpack-cli

Webpack의 필요성

• 바벨과 웹팩을 이용해 ES2015에서 나온 표준 모듈 시스템을 사용하기 위함
  • 모든 브라우져에서 모듈 시스템을 지원하지 않는다. (ie, 및 하위 버전 브라우저 등)
  • 브라우져에 무관하게 모듈을 사용하려면 웹팩의 도움을 얻어야 한다.

ES2015 이전 모듈 환경

ES2015부터 문법 수준의 모듈을 지원함
이전에는 아래와 같이 각 커뮤니티에서 각자의 스펙을 제안

• CommonJS: exports 키워드로 모듈을 만들고, require()함수로 불러 들이는 방식
• AMD(Asynchronous Module Definition): 비동기로 로딩되는 환경에서 모듈로 사용하는것이 목표
• UMD(Universal Module Definition): AMD 기반으로 CommonJS방식까지 지원하는 통합 형태

Webpack Option

웹팩을 실행할 때 필수적인 옵션 3가지

1. --mode: 웹팩의 환경을 결정

• "development": 개발환경 최적화
• "production": 운영(배포)환경 최적화
• "none"

2. --entry: 모듈이 시작되는 부분 지정

• 의존관계에 있는 모듈들의 첫번째 시작점

3. --output: 모듈을 하나로 합치고 그 결과를 저장하는 경로를 지정

• --ouput-path dist/

웹팩 설정 파일

$ node_modules\.bin\webpack --mode development --entry ./src/app.js --output-path dist/

웹팩을 설정할때마다 매번 긴 옵션을 입력할 수 없으니 설정파일을 만들어서 관리

• --config: 웹팩 설정 파일을 지정
  • default: webpack.config.js or webpackfile.js

// webpack은 Node.js 위에서 돌아가는 프로그램이라  Node.js가 사용하는 모듈시스템(Commonjs)을 이용
const path = require('path');
// path 모듈 가져오기

module.exports = {
  mode: 'development',
  entry: {
    main: './src/app.js'
  },
  output: {
    path: path.resolve('./dist'), // path.resolve => 절대경로 계산
    filename: '[name].js' // [name] => entryt에서 설정한 key값 === 'main'
  }
}

npm scripts 등록

• npm은 현재 node_modules를 뒤져서 webpack 명령어를 찾는다.
• 웹팩 기본 설정파일을 읽어서 번들링 작업 실행

"scripts": {
  "build": "webpack"
}