하태핫해! 핫한 Webpack에 대해 알아보자!

시작하기 전에

해당 블로그에 작성되는 글은 주인장의 지극히 주관적인 생각이 다수이며, 대부분의 지식은 구글링을 통해 얻고 있기 때문에 옳지않은 정보가 있습니다. 

잘못된 부분이나 수정해야 하는 부분이 있다면 과감히 덧글을 남겨주세요! 모르는게 많은 새싹입니다

오늘의 주제

오늘의 주제는 핫한 번들러 Webpack입니다. React를 공부하다 보니 자연스럽게 Webpack을 접하게 되었고, 모르고 지나칠 수 있는 부분이 아니다 보니까 알아보게 되었어요. 자의보다는 타의가 더 강했지만, 언제나 새로운 지식을 배워가는건 재미있고 흥미로운거 같아요. Wepack이 왜 핫한 번들러가 되었는지 기본적인 사용법이 어떻게 되는지 한번 알아보도록 할게요!

웹팩(webpack)에 대해 알아보자!

SPA(Single Page Application)이 인기를 얻기 시작하면서 서버에서 작업하던 코드들이 javascript로 넘어오기 시작했고, 볼륨이 큰 프로젝트의 경우 javascript 파일은 수백, 수천개가 될정도로 양이 방대해지게 되었습니다. 이에 대해 javascript를 좀 더 효율적으로 유지, 보수하기 위해서 모듈화 할 필요가 생겼지만 javascript는 자체적으로 모듈시스템이 존재하지 않기 때문에 이런 문제를 해결하기 위해 번들러인 webpack이 개발 되었습니다.

예를 들어 10개의 페이지가 각 10개의 자바스크립트 파일을 불러온다고 생각했을 때, javascript 파일을 http 통신을 통해 가져오기 위해서는 총 100번의 http 통신이 이루어지게 되고, 프로젝트의 크기가 커지면 커질수록 javascript 양은 많아지고 모듈화된 파일도 많아 질 것 입니다. 아마 그렇다면 페이지 로딩속도는 점점 느려지지 않을까요?

그렇습니다, 번들링을 통해 http 통신 횟수를 줄임으로 퍼포먼스 향상을 목적으로 합니다.

웹팩은 모듈화된 수많은 자바스크립트 파일들을 한번에 불러올 수 있도록 bundling 작업을 해줍니다. 필요에 따라 하나의 파일로 번들링 할 수도 있고, 필요에 따라 여러개의 파일로 분리하여 번들링 할 수도 있습니다. 또한, 웹팩은 javascript 모듈화 명세를 만드는 대표그룹 CommonJs와 AMD(Asynchronous Module Definition)을 모두 지원합니다.

웹팩이 하는일을 그림으로 확인하면 다음과 같습니다.

* import, require를 통해 연결된 의존성에 묶여있는 여러 파일들에 대해 의존성 트리를 구성하고 하나의 파일로 번들링하는 역할을 한다.

* 각 용도에 맞는 파일끼리 번들링을 할 수 있다.

기본적인 웹팩 설정에 대해서 알아봅시다.

webpack.config.js

웹팩의 기본적인 설정을 명세(?)해주는 configuration 파일입니다.

이제 밑에서 핵심적으로 알아볼 속성들은 다음과 같습니다.

1. entry

2. output

3. loader

4. resolve

5. optimization

const webpack = require('webpack');
module.exports = {
  mode: 'production',
  entry: {
    'resultFilename': '',
  },
  output: {
    path: '',
    filename: '',
    publicPath: '',
  },
  module: {
    
  },
  plugins: [],
  optimization: {},
  resolve: {
    moduels: ['node_modules'],
    extensions: ['.js','.json','.jsx','.css']
  }
}

1. entry: 의존성 그래프의 시작점을 설정합니다.

/*
엔트리로 설정된 두개의 파일이 하나의 app.js라는 결과물로 나온다.
a,b에 의존적으로 묶여진(import, require 관계로 묶여진) 다른 js 파일들까지 모두 합쳐주기 때문에 entry를 의존성 그래프의 시작점이라고 한다.
*/
entry: {
  app: ['a.js', 'b.js'], // 하나의 엔트리에 여러개의 파일을 넣고 싶을때는 배열을 사용한다.
  dongsu: ['c.js'], // 엔트리가 여러개일 경우 엔트리 개수 만큼의 번들 파일이 생성된다.
}
​

2. output: 번들링된 결과가 저장되는 곳 입니다.

/*
나오는 결과물에 대한 설정을 하는 부분
*/
{
  output: {
    // 어떤 경로에 저장될지 설정해 줍니다. 
    path: '/dist' 
    filename: '[name].js' // [name]에는 entry에서 설정한 파일 이름이 들어갑니다.
    publicPath: '/' // 파일들이 위치할 서버상의 경로
  }
}

3. loader: 파일들을 불러오는 역할을 합니다.

보통 webpack은 babel과 함께 사용합니다. 구형 브라우저와 호환시키거나 jsx같은 리액트 문법을 컴파일 하기 위해 사용합니다.

* babel을 사용하기 위해서는 babel-loader와 babel-core를 함께 설치해야 합니다.

* bable-loader는 webpack이 .js파일에 대해 babel을 실행하도록 만듭니다.

* babel-core는 실제로 babel이 작동하는데 필요한 코드입니다.

* babel-preset-env는 babel이 지원되는 범위를 설정합니다. babel에서 지원되는 다양한 플러그인들을 모아 둔것을 preset이라고 부릅니다. env는 브라우저에 필요한 ecmascript 버전을 자동으로 파악해서 ployfill을 설치합니다.

/*
  env에 있는 modules를 false로 설정해야 트리쉐이킹이 가능해집니다.
  "트리쉐이킹이랑 import되지 않은 export들을 정리해주는 기능"입니다.
  하지만 commonJS나 AMD, UMD 같은 모듈 시스템을 사용하는 클라이언트에서는 제대로 작동하지 않습 니다.
​
  exclude는 바벨로 컴파일 하지 않을 것들을 지정해 줍니다.
  반대로 include는 반드시 컴파일 할 것들을 지정할 수 있습니다.
  
  create-react-app 한후 eject한것과 비교하면 음... 멘탈이 흔들릴 수 있으니 조심하세요.
*/
{
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        options: {
           presets: [
           [
            '@babel/preset-env', {
              targets: { node: 'current' }, // 노드일 경우만
              modules: 'false'
            }
          ],
          '@babel/preset-react',
         ]
        }
      }]
  }
}

4. resolve: webpack이 알아서 경로나 확장자를 처리할 수 있게 도와주는 옵션입니다.

/*
modules에 node_modules를 넣어야 디렉토리의 node_modules를 인식한다. extension에 넣은 확장자들을 알아서 처리해 주기 때문에 파일에 확장자를 넣을 필요가 없다.
*/
resolve: {
    moduels: ['node_modules'],
    extensions: ['.js','.json','.jsx','.css']
  }

5. optimization : 웹팩4에서 추가되었습니다. 최적화 플러그인들이 모두 optimization attribute로 통합되었습니다.

/*
mode가 production인 경우 자동으로 minimize options과 splitChunk 옵션이 on 상태가 되니 잊지 말라구욧-!
*/
​
{
  optimiation: {
    minimize: true/false, // UglyfyJsPlugin의 역할을 합니다
    splitChunk: {}, // CommonChunkPlugin의 역할을 합니다
    concatenateModules: true // ModuleConcatenateionPlugin의 역할을 합니다
  }
}

사실, webpack은 버전업 되는 속도도 너무 빠르고 설정 잡는거 자체가 너무 복잡해서 진짜 기본적인 내용에 대해서 소개를 하였습니다. 본인이 개발에 필요한 플러그인을 사용하고 좀 더 적절하게 사용하기 위해서는 진짜 많은 공부를 해야할 것 같아요. 이상으로 webpack에 대한 포스팅을 마치도록 하겠습니다.

웹팩 설정에 대한 많은 부분은 여기를 참고하였습니다!