Webpack 시작하기

모듈 번들링?

하나의 웹서비스를 구성하는 파일들(이미지, .js, Sass, 등등)의 연관관계를 웹팩이 파악해서 하나의 파일로 변환 해준다.
하나로 합친다 + 이미지 압축을 통한 이미지 최적화

<aside> 💡 하나의 웹서비스를 구성하는 파일들을 해석한 다음에(파일들의 연관관계파악) 파일을 하나로 합쳐준다.(번들링)

빌드, 번들링, 변환 이 세 단어 모두 같은 의미입니다.

</aside>

스크린샷 2022-07-26 오후 2.04.31.png

npm i webpack webpack-cli -D

-D는 devdependencies에 추가되는 개발용 라이브러리에 설치하겠다의미 로 “나중에 운영서버 빌드에서 배포할때는 빠진다”

스크린샷 2022-07-26 오후 2.14.03.png

<aside> 💡 lodash는 -D가 안붙었기 때문에 일반 dependencies에 들어가고, 실제 애플리케이션 로직에 영향을 미치는 라이브러리로 설치 하였다.

</aside>

웹팩 적용 전 (우리가 맨날 하는 것)

// kks.js
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());

/* index.html */
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
	/* lodash 라이브러리 추가 */
  <script src="<https://unpkg.com/[email protected]>"></script>
  <title>Document</title>
</head>
<body>
  <h1>사스로 웹팩 설정</h1>
	/* 일반 스크립트 추가 */
  <script src="src/kks.js"></script>
</body>
</html>