[webpack] ch1. Webpack은 무엇인가?

[webpack] ch1. Webpack은 무엇인가?

18 Jun 2021

javascript

Webpack은 무엇인가?

서로 연관 관계가 있는 웹 자원들을 js, css, img와 같은 스태틱한 자원으로 변환해주는 모듈 번들러

Webpack을 사용하는 이유? 배경?

새로운 형태의 WebTask Manager

기존 Web Task Manager(Gulp, Grunt)의 기능 + 모듈 의존성 관리
minification을 webpakc default cli로 실행 가능
```
webpack -p
```

Code based Modules 관리

자바스크립트 모듈화의 필요성 : AMD, Common js, ES6(Modules)
기존 모듈 로더들과의 차이점 : 모듈 간의 관계를 청크(chunk)단위로 나눠 필요할 때 로딩
현대 웹에서 JS 역할이 커짐에 따라 Client Side에 들어가는 코드량이 많아지고 복잡해짐
복잡한 웹 앱 관리를 위해 모듈 단위로 관리하는 Common js, AMD, ES6 Modules 등이 등장
가독성이나 다수 모듈 미병행 처리등의 약점을 보완하기 위해 webpack이 등장

자바스크립트 모듈화 문제란?

script태그를 사용하는 자바스크립트 모듈화 예제

<script src="module1.js"></script>
<script src="module2.js"></script>
<script src="library1.js"></script>
<script src="module3.js"></script>

위 모듈 로딩 방식의 문제점 : 전역변수 충돌, 스크립트 로딩 순서, 복잡도에 따른 관리상의 문제
이를 해결하기 위해 AMD 및 기타 모듈 로더들, webpack이 등장

Webpack의 철학

Everything is Module

모든 웹 자원(js, css, html)이 모듈 형태로 로딩 가능
```
require('base.css');
require('main.js');
```

Load only “what” you need and “when” you need

초기에 불필요한 것들을 모두 로딩하지 않고, 필요할 때 필요한 것만 로딩하여 사용

Webpack 설치

NPM이 기본적으로 설치되어 있어야 함.(Node 설치시 같이 설치됨)
Webpack 4.5로 버전업 되면서 npm i webpack -g만 설치하면 되던 것이 npm i webpack-cli -g도 같이 설치해 줘야 함

Webpack 설치 (4.5부터 cli도 같이 설치해야 함)
```
npm i webpack -g
npm i webpack-cli -g
```
package.json 생성 npm init -y
index.js 와 index.html 작성 ```javascript function component () { var element = document.createElement(‘div’);

/* lodash is required for the next line to work */ element.innerHTML = _.join([‘Hello’,’webpack’], ‘ ‘);

return element; }

document.body.appendChild(component());

```html
<html>
  <head>
    <title>webpack 2 demo</title>
    <script src="https://unpkg.com/lodash@4.16.6"></script>
  </head>
  <body>
    <script src="app/index.js"></script>
  </body>
</html>

lodash를 이용하여 Hello Webpack 메시지를 구성하여 HTML에 div를 추가하는 로직

lodash 라이브러리 npm에 추가하기

lodash 라이브러리는 CDN을 통해 가져오고 있는데 직접 구성하려면 npm을 통해 package.json에 추가하면 됨

npm i lodash --save

index.js에 import문 추가 lodash를 직접 참조하려면 import문을 추가해줘야 함. ES6 지원 문법이므로 webpack으로 번들링 작업을 거쳐야 함
```
// index.js 소스 수정. +표시 라인 추가
+ import _ from 'lodash';
```
webpack을 통한 bundling
```
webpack app/index.js dist/bundle.js
```

index.html 소스 수정 기존의 app/index.js를 참조하던 라인을 dist/bundle.js로 변경

// index.html 소스 수정. 아래 코드 중 -표시 라인은 삭제하고 +표시 라인은 추가함
- <script src="https://unpkg.com/lodash@4.16.6"></script>
- <script src="app/index.js"></script>
+ <script src="dist/bundle.js"></script>

webpack의 config 파일 구성하면 일일이 cli명령어를 치지 않아도 됨. (webpack.config.js) ```javascript // webpack command will pick up this config setup by default var path = require(‘path’);

module.exports = { entry: ‘./app/index.js’, output: { filename: ‘bundle.js’, path: path.resolve(__dirname, ‘dist’) } }; ```