[Webpack] Webpack 기초부터 정리

webpack 이란 무엇인가?

• webpack은 모듈 번들러이다.
• 각 모듈의 의존 관계를 파악해서 하나의 묶음 파일(bundle)로 만들어준다.
• 로더를 사용하면 css 하나의 javascript에 통합할 수 있다.

왜 필요한가?

webpack이 필요한 이유는 등장하게 된 배경과 연관이 있습니다.
webpack의 등장 배경에 대해서는 이 글에 자세히 정리되어 있습니다.

간략히 목록으로만 정리하면 웹팩의 등장 배경은 아래와 같습니다.

1. 파일 단위의 모듈 관리의 필요성
2. 웹 개발 작업 자동화 도구
3. 웹 애플리케이션의 빠른 로딩 속도와 높은 성능

webpack 설치 및 설정

webpack 설치

npm install --save-dev webpack webpack-cli

webpack 설정

• webpack의 기본 설정 파일 이름은 webpack.config.js 입니다.
• 프로젝트 디렉터리에 webpack.config.js가 있다면 번들링을 수행 할때 추가적인 옵션없이 webpack 명령어로 만 수행 가능합니다.

// webpack.config.js
const path = require('path');

module.exports = {
    mode: 'development',
    entry: {
        main: './src/app.js',
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].bundle.js',
    }
}

package.json에 script 등록

• package.json에 webpack 명령어를 script로 등록해서 사용할 수 있다.
• 아래와 같이 script를 등록했다면, npm run build을 입력하면 webpack이 루트 디렉터리의 webpack.config.js를 자동으로 읽어서 번들링을 수행한다.

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

webpack.config.js 파일 분석

• webpack.config.js 파일은 webpack의 기본 설정 파일입니다..
• 기본적으로 mode, entry, output에 대한 설정을 작성합니다.
• entry 옵션에 여러개의 시작 파일을 등록할 수 있다.
  • 이런 경우 output 옵션의 filename 속성은 [name]으로 시작해야 각각의 시작 파일에 대한 번들 파일이 생성된다.

// webpack.config.js

// Node 모듈의 일종인 path 모듈 가져오기
const path = require('path');

module.exports = {
    // 번들의 모드는 development로 설정
    mode: 'development',
    entry: {
        // 번들의 시작할 파일
        // 이 파일을 시작점으로 다른 의존성 파일을 탐색한다.
        main: './src/app.js',
    },
    output: {
        // 번들링된 결과를 저장한 경로 지정
        path: path.resolve(__dirname, 'dist'),
        // 번들링된 결과(번들 파일)의 이름
        // [name] 부분에는 entry의 key 값이 들어간다.
        filename: '[name].bundle.js',
    }
}

---

참고 자료

• webpack
• 김정환 블로그 - 프론트엔드 개발환경의 이해: 웹팩(기본)
• 웹팩 핸드북

읽어 주셔서 감사합니다 :)
잘못된 부분이 있다면 댓글로 편히 알려주세요