단순 정의
WebPack이란 모듈을 번들링하는 도구다.
WebPack 공식 홈페이지의 메인화면에서 돌아가는 이미지를 보면 보다 쉽게 이해가 될 것이다.
대충봐도 복잡한 의존성 모듈들을 묶어서 정적 요소로 합쳐주는 것이다.
다음은 공식 홈체이지에 잇는 예제이다.
src/index.js
import bar from './bar';
bar();src/bar.js
export default function bar() {
//
}webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
}
};이제 webpack을 커맨드라인에서 실행시키면, bundle.js 파일이 생성된다.
사용하기 위해서는 bundle.js를 html에 포함시켜주기만 하면 된다.
page.html
<!doctype html>
<html>
<head>
...
</head>
<body>
...
<script src="dist/bundle.js"></script>
</body>
</html>
장점
- 한 화면을 불러오기 위해서 수많은 script와 css등의 파일들을 하나로 묶어서 불러오기 때문에, 불필요한 network request가 없어진다.
- 컴파일 조작이 간단하다. (cli 명령어 한번으로 처리 가능)
- webpack config에 loader를 어떻게 설정하느냐에 따라 다양한 버전을 지원하는 웹 앱을 만들 수 있다.(babel같은.._)
예를 들면, 이전에 작성한 CSS 전처리기의 경우, 유지관리를 위해 여러 개의 CSS 파일로 분리할 수 있다고 했다. 일반 CSS의 경우 분리된 모든 파일들을 불러오기 위해서 분리된 CSS 파일 갯수만큼의 네트워크 요청이 필요했다.
전처리기를 사용해서 하나의 CSS 파일로 묶어 전달하게 되면 1개의 CSS파일만 호출하게 되는 것과 같은 맥락이다.
2020/11/05 - [FrontEnd/CSS] - CSS 전처리기의 종류와 장단점
CSS 전처리기의 종류와 장단점
CSS 전처리기란? 간단히 말해, CSS의 한계를 뛰어넘기 위해 개발된 새로운 형태의 CSS라고 할 수 있습니다. 내가 CSS를 보다 쉽게 작성할 수 있게 다른 개발자들이 내가 작성한 CSS를 보다 쉽게 이해
fathory.tistory.com
단점
- webpack.config.js 파일을 설정하는 것이 꽤나 복잡하다.
- 버전별 종속성이 존재한다.
- 러닝커브가 좀 있다고 한다.
* 참고하면 좋은 사이트
웹팩이란? | 웹팩 핸드북
웹팩이란? 웹팩이란 최신 프런트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러(Module Bundler)입니다. 모듈 번들러란 웹 애플리케이션을 구성하는 자원(HTML, CSS, Javscript, Images 등)을 모두 각
joshua1988.github.io
'FrontEnd' 카테고리의 다른 글
| 자바스크립트 알고리즘 테스트를 통해 어떤 능력을 향상시킬 수 있나요? (0) | 2023.06.28 |
|---|---|
| 자바스크립트 알고리즘 테스트에서 자주 등장하는 문제 유형은 무엇인가요? (0) | 2023.06.28 |
| 자바스크립트 알고리즘 테스트의 장점과 필요성은 무엇인가요? (0) | 2023.06.28 |
| 패럴렉스 스크롤링이 웹 성능에 미치는 영향: 모바일 사용자 경험 (0) | 2023.06.22 |
| SPA 활용 사이트 모음(awwwards) (0) | 2019.06.05 |
