프론트엔드 필수 Webpack이란?

프론트엔드 개발자라면 꼭 알아야 하는 기술 중 하나라고 생각한다.

Webpack이란 ?

• Webpack = 모듈 번들링이라고 한다.
• html 파일에 들어가는 자바스크립트 파일들을 하나의 자바스크립트 파일로 만들어주는 방식을 모듈 번들링이라고 한다.
• 쉽게 말하면, 필요한 다수의 자바스크립트 파일을 하나의 자바 스크립트 파일로 만들어 주는 것을 Webpack 이라고 한다.

그럼 Webpack을 왜 사용해야 할까 ?

• 옛날에는 페이지마다 새로운 html을 요청해서뿌려 주는 방식이였다면, 요새는 SPA 하나의 html 페이지에 여러개의 자바스크립트 파일들이 포함한다. 연관 되어 있는 자바스크립트 종송석 있는 파일들을 하나의 파일로 묶어줘서 관리하기 편하다.
• 파일을 컴파일 할 때, 여러 모듈들의 파일을 읽어오는데 시간이 오래 걸린다. 그 부분을 해결하기 위해 여러 파일을 하나의 파일로 번들링 해준다.
• 하나의 자바스크립트 파일로 만들어서 웹페이지 성능 최적화 해준다.

나는 Webpakc를 사용하기 위해서는 옵션으로 babel로 이해하고 사용해야 한다고 생각한다.

그럼 babel은 또 무엇인가 ?

Babel 이란 ?

• 최신 ES6버전을 구 버전인 ES5로 변환해준다.

그럼 Babel은 왜 사용해야 할까?

• 최신 업데이트 중에 ES6버전은 큰 업데이트 부분을 차지한다.
  크게 일어난 만큼 ES6를 지원해주는 브라우저가 있다. 그 중에서는 지금까지는 크롬, 사파이, 파이어폭스(98%)와 같은 에버그린 브라우저는 최신 업데이트 버전으로 지원을 해준다.
  하지만 인터넷 익스플로러11을 사용하는 비율도 11% 정도나 되는데 지원을 하지 않는다. 그러므로 아직 구 버전을 사용하는 ES5버전으로 바꿔주어야 한다.
• 그래서 개발환경을 설정할 때, webpack이랑 babel로 기초 환경 설정을 잡고 개발을 해야 한다.

그럼 기초 개발 환경 세팅에서 필요한 명령어는 무엇일까 ?

webpack 명령어

$ npm init -y

$ npm install webpack --save-dev 

만약 웹팩 v4 혹은 이후 버전을 사용한다면, CLI도 설치해야 합니다.

$ npm install --save-dev webpack-cli



패키지를 설치 하였으면, 제대로 성공 되었는지 확인 해보자

$ .\node_modules\.bin\webpack -v

webpack 설치 완료. ! ( 추후에 테스트 하는 과정도 업로드 할 예정이다.)

Webpack를 설치하기 앞서 자바스크립트 설정 파일을 만들어 주어야 한다.
Webpack을 만들 최상위 경로에 wepback.config.js 라는 자바스크립트 파일을 만들어준다.(기본적이 파일 이름이다. 왜 이거를 쓰지 ? 라고 생각하지 말고 기본적인 약속의 파일 이름이라고 알아두면 좋을거 같다^^)

const path = require('path');

module.exports={
    entry : './src/test.js',
    output: {
        filename : 'bundle.js',
        path : path.resolve(__dirname + '/build')
    },
    mode : 'none'
}

작성해준다.
여기서 또 알아두어야 구조가 있다.

• path : 파일의 경로를 다루고 변경하는 유틸리티
• output : build 결과를 저장할 경로
• entry : build의 대상이 될 파일
• Plug-In : build 된 bundle 파일을 동적으로 특정 html 페이지에 추가 할 수 있으며 build 시에 javscript, css, html 등의 파일을 난독화 및 압축을 진행할 수 있다.

왜 써야 하는지만 알아두면 될거 같다.
Webpack 파일 및 설치까지 완료 되었다. 자바스크립트 파일 중에는 여러가지 파일들이 있다. Css / img / jsx 등 이 파일들을 하나의 webpack으로 말아주기 위해서는 그 파일들을 설정해주어야 한다.

그 부분에서

Loader를 사용한다.

자바스크립트와 같이 하나의 bundle로 만들 수 있는 Loader에 대해 살짝 알아보자

CSS / SaSS

style-loader와 css-loader는 같이 사용되며 모든 설치는 npm을 통해 설치를 진행한다.

$ npm install style-loader css-loader --save-dev

설치가 되었으면 아까 만든 webpack.config.js 파일에 정의해보자.

var path = require('path');

module.exports = {
   entry : './src/test.js',
    output: {
        filename : 'bundle.js',
        path : path.resolve(__dirname + '/build')
    },
    mode : 'none',
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }
};

이렇게 번들링 해줄 로더 파일을 npm패키지로 설치한 후에 정의를 해주면 된다.

babel 명령어

$ npm install @bable/node
$ npm install @bable/preset-env
$ npm install @bable/core

명령어를 입력해 설치해준다.

설치 후 bable를 설치할 파일을 최상위 root에 만드러 준다.
.babelrc 추가하고 아래 소스를 입력해준다.

{
	"presets" : ["@bable/preset-env"]
}

그리고 package.json의 script에 start도 babel-node index.js로 수정해준다.

$ npm run start

시작 명령어를 입력하면, Babel 커맨드가 실행될 것이다.

오늘은 일단 Webpack이랑 bable이라는 활용법을 알아봤다.
다음에는 React 환경설정에 필요한 webpack/bable를 정리할 예정이다.

감사합니다.