6. Webpack 참고사항

npx webpack 을 계속해서 실행하기 귀찮은 경우가 있을 것이다.

이 경우 다음과 같은 명령어를 사용해보자.

npx webpack —watch

이 명령어를 치게 되면 파일을 변경하게 되면 webpack 이 자동으로 탐지하고 번들링을 해주게 된다.

---

NPM 패키지 사용

npm을 통해서 설치한 여러가지 작은 부품이될 프로그램들을 애플리케이션으로 가져오는 방법으로써 webpack을 사용하는 방법을 알아보자.

lodash 라는 유명한 라이브러리로 알아보자.

npm install lodash

를 입력하게 되면 해당 라이브러리가 npm 패키지 도구에 의해 다운로드 된다. 그러면 이 라이브러리를 어떻게 webpack 에 삽입할까

다운 받은 후 js 파일을 다음과 같이 바꿔줄 수 있다.

import hello_word from './hello.js'; 
import world_word from './world.js';
import _ from "lodash";
import css from './style.css';
document.querySelector('div#root').innerHTML = hello_word + ' ' + world_word;

이렇게 바꿔주면 lodash 도구를 _ 에 할당해주어 사용할 수 있다.

크게 별거는 없지만 이런식으로 유용한 npm 라이브러리를 다운받아 사용할 수 있다.

---

Lazy loading

: 너무 큰 번들링 파일인 경우 → 쪼개는 과정이 필요 → webpack 이 제공

---

Webpack 은 없어도 일은 할 수 있지만 있으면 일을 잘 할 수 있는 정도이다. 허나 모르는 것보다는 한번 맛보는 것이 더 좋은 것이니 프로젝트에 한번 사용해볼 예정이다.

Uploaded by Notion2Tistory v1.0.0