React를 공부하다 보면 Webpack과 Babel을 보게 되는 경우가 있었는데 따로 webpack을 공부해본 적은 없었다. 이번에 3개월차 기업협업을 나가게 되면서 vue.js를 사용하게 된다는 이야기를 듣고, webpack 공부를 시작해보려고 한다.

1. Webpack

- 웹팩은 모듈 번들러이다.

• 여러 개의 모듈을 하나의 파일로 묶어서 보낼 모듈 번들러가 필요하다. 웹팩에서는 자바스크립트, 스타일시트, 이미지 등 모든 것을 모듈로 보며, 이런 웹팩에는 중요한 속성이 4가지 있다.

1-1. Webpack 속성

1) Entry

entry 는 웹팩에서 웹 자원을 변환하기 위해 필요한 최초 진입점이며, 자바스크립트 파일 경로 이다. 웹팩은 entry 를 통해서 모듈을 로딩하고 하나의 파일로 묶는다.

• require, @import 등 모듈간의 의존성을 해석하며 의존성 트리를 생성, 하나 이상의 진입 포인트를 설정할 수 있다.

// 속성을 사용하여 하나 이상의 진입 포인트를 설정 가능
{
  entry: {
    app: './src/app.js'
  }
}

2) Output

웹팩에서 entry 로 찾은 모듈을 하나로 묶은 결과물을 반환할 위치이다.

• output.path: 결과물이 저장될 경로 지정
• output.filename: 결과물의 파일 이름 지정

매개변수 설정

{
  entry: {
    app: './src/app.js'
  },
  output: {
    path: '/dist',
    filename: '[name].bundle.js'
  }
}

3) Loader

웹팩은 기본적으로 자바스크립트와 JSON 만 빌드할 수 있다. 자바스크립트가 아닌 다른 자원 (HTML, CSS, Image)를 빌드할 수 있도록 도와주는 속성이다.

• loader 는 module 과 rules 이라는 키워드를 사용합니다. 룰을 정의 할 때는 아래의 폼을 사용합니다.

module: {
  rules: [
    {
      test: '빌드할 파일 확장자 정규식'
      exclude: '제외할 파일 정규식'
      use: {
        loader: '사용할 로더 이름'
        option: '로더 옵션'
      }
    }
  ]
}

4) Plugin

plugin 은 웹팩의 기본적인 동작 외 추가적인 기능을 제공하는 속성이다. loader 는 파일을 해석하고 변환하는 과정에 관여하고, plugin 은 결과물의 형태를 바꾸는 역할을 한다.

// ...
  plugins: [
    new HtmlWebpackPlugin({
      template: 'public/index.html',
    })
  ],
// ...