프론트엔드 개발자라면 꼭 알아야 하는 기술 중 하나라고 생각한다.
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를 정리할 예정이다.
감사합니다.
'Developer > 기술면접' 카테고리의 다른 글
면접질문 정리 ( Java & Database ) (0) | 2022.07.12 |
---|---|
SSR과 CSR의 차이 (0) | 2021.08.21 |
Promise란? (0) | 2021.07.20 |
async , await란? (0) | 2021.07.20 |
동기(Sync), 비동기(Async)란? (0) | 2021.07.20 |