티스토리 뷰
Webpack - 웹팩(Webpack)
http://blog.jeonghwan.net/js/2017/05/15/webpack.html 참고
https://hjlog.me/post/117 참고
| 들어가기전,
리액트를 시작한지 얼마 되지 않아서, create react app 명령어 하나면 웹팩관련설정이나 관련한 설정이 다 된 상태로 리액트 프로젝트가 만들어지기 때문에 웹팩에 대해서 깊이 알지 못했었다. 프론트엔드 개발자라면, 필수적으로 알아야 하는 개념이기 때문에 학습해 보았다.
| 웹팩이란?
웹팩이란 것에 대해서 일단 어떤것이기 알기위해 검색해서 여기저기 블로그를 찾아다니며 그 개념에 대해서 찾아 보았다. 그는 아래와 같다.
- Webpack은 모듈 번들러로서, 큰 파일을 서로간의 종속성을 갖는 여러 작은 모듈로 쪼갤 수 있게 하고, 해싱을 이용해 장기적인 캐싱을 통한 성능 향상을 도우며, CSS 전처리기나 compile-to-js 파일들의 컴파일에도 사용할 수 있고, 핫 리로딩을 지원하는 등 정적 에셋 관리 전반적인 프로세스에 큰 도움이 된다.
- 웹팩은 기본적으로 모듈 번들러다.의존성 그래프에서 엔트리로 그래프의 시작점을 설정하면 웹팩은 모든 자원을 모듈로 로딩한 후 아웃풋으로 묶어준다. 로더로 각 모듈별로 바벨, 사스변환 등의 처리를 하고 이 결과를 플러그인이 받아 난독화, 텍스트 추출 등의 추가 작업을 한다.
공통적으로 나오는말이 모듈, 번들링인데
모듈의 정의를 살펴보면,
모듈은 애플리케이션을 구성하는 개별적 요소로서 구현된 세부 사항을 캡슐화하고 공개가 필요한 API를 외부에 노출하여 다른 코드에서 로드하여 사용할 수 있도록 작성된 재사용 가능한 코드 조각을 말한다.
JavaScript의 경우, script 태그를 사용하여 외부의 스크립트 파일을 가져올 수는 있지만 파일마다 독립적인 파일 Scope를 갖지 않고 하나의 전역 객체(Global Object)에 바인딩되기 때문에 전역변수가 중복되는 등의 문제가 발생할 수 있다. 이것으로는 모듈화를 구현할 수 없다.
왜 웹팩을 써야하는지 슬슬 감이 잡혔다. 이러한 모듈화 그리고 이런 상황에서, 모듈간의 의존성을 해석하고, 그걸 바탕으로 잘 작동하는, 서빙할 수 있는 정적 에셋(static asset)을 만드는 과정이 모듈 번들링이니 웹팩사용이유에 대한 이유가 선명해진것이다.또한 하나의 파일로 묶어(bundle) 네트웍 비용을 최소화 하는 과정이 웹프론트 과정에서는 필요하다고 한다.
웹팩은 이러한 배경에서 이해할 수 있었으니. 기본적으로 모듈 번들러로 소개하고 있는 웹팩의 주요 네 가지 개념을 정리해 보자.
| 엔트리, 아웃풋, 로더, 플러그인
http://blog.jeonghwan.net/js/2017/05/15/webpack.html 참고
위와 관련해서는 위 블로그에 정말 정리가 잘되어 있어 그 내용을 본따왔다.
1. 엔트리
자바스크립트가 로딩하는 모듈이 많아질수록 모듈간의 의존성은 증가한다. 의존성 그래프의 시작점을 웹팩에서는 엔트리(entry)라고 한다.
webpack.config.js:
module.exports = {
entry: {
main: './src/main.js',
}
}위와 같이 첫 엔트리를 설정파일에 추가를 해주는 것이다.
2. 아웃풋
엔트리에 설정한 자바스크립트 파일을 시작으로 의존되어 있는 모든 모듈을 하나로 묶을 것이다. 번들된 결과물을 처리할 위치는 output에 기록한다.
webpack.config.js:
module.exports = {
output: {
filename: 'bundle.js',
path: './dist'
}
}html파일에서는 번들링된 이 파일을 로딩하게끔 한다.
index.html:
<body>
<script src="./dist/bundle.js"></script>
</body>여기까지 간단히 웹팩으로 번들링하는 과정이라고 한다.
3.로더
웹팩은 모든 파일을 모듈로 관리한다고 한다. 자바스크립트 파일 뿐만 아니라 이미지, 폰트, 스타일시트도 전부 모듈로 관리한다. 그러나 웹팩은 자바스크립트 밖에 모른다. 비 자바스크립트 파일을 웹팩이 이해하게끔 변경해야하는데 로더가 그런 역할을 한다고 한다.
로더는 test와 use로 구성되어 있는데,
- test 에 로딩할 파일을 지정하고
- use 에 적용할 로더를 설정한다.
babel-loader
ES6로 작성코드를 바벨-로더를 이용해 ES5으로 변환하는 예제
webpack.config.js:
module.exports = {
module: {
rules: [{
test: /\.js$/,
exclude: 'node_modules',
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
}]
}
}css-loader, style-loader
UglifyJsPlugin
플러그인을 사용할 때는 웹팩 설정 객체의 plugins 배열에 추가한다.
const webpack = require('webpack')
module.exports = {
plugins: [
new webpack.optimize.UglifyJsPlugin(),
]
}
아래 번들링된 결과를 확인해 보자.
| 마치며
웹팩은 엔트리에서 의존성 그래프 시작점을 설정해주고, 모든 자원들을 모듈로 로딩해서 번들링을 해주고, 로더로 각 모듈벌 바벨이나, 다른 형식 파일들을 js로 변환해주는 작업들을 거치고 최종 결과물을 플러그인이 받아 난독화 과정들을 거치는것이다.
'Front end > webpack' 카테고리의 다른 글
| Webpack - Webpack 0부터 CRA 까지 (스터디 내용정리) (0) | 2018.08.08 |
|---|---|
| Webpack - 웹팩 4 뽀개기 (개발하기 sourcemap, 개발서버 setting(webpack dev server) (0) | 2018.07.19 |
| Webpack - 웹팩 4 뽀개기 (기본 개념 Entry, Output, Loaders, Plugins) (0) | 2018.07.18 |
| Webpack- 웹팩 경로 설정시 src라는 이름으로 alias만들기 (0) | 2018.06.27 |
| Webpack - 웹팩 환경 세팅하기 (0) | 2018.04.15 |