on
[Node] Webpack 설치 및 사용법
[Node] Webpack 설치 및 사용법
JavaScript는 웹 개발자에게 브라우저에서 직접 코드를 실행하고 동적인 대화형 웹 사이트를 구축할 수 있는 능력을 제공한다는 목표 로 탄생하였습니다. 지금까지 JavaScript는 많은 성장을 하였습니다. 처음 JavaScript가 매우 간단하고 제한된 언어 였다면 오늘날에는 거의 모든 종류의 애플리케이션을 빌드하기 위해 브라우저 외부에서도 사용할 수 있는 완전한 범용 언어 로 간주될 수 있습니다. 실제로 JavaScript는 이제 프론트엔드 애플리케이션, 엡 서버 및 모바일 애플리케이션은 물론 웨어러블 장치, 온도 조절기, 비행드론과 같은 임베디드 장치를 지원하고 있습니다.
새로운 추세에 JavaScript 개발자들은 동일한 프로젝트의 여러 환경에서 코드를 재사용하고 단순화 시킬 필요 가 있다고 생각하였습니다. Node.js를 사용하면 개발자는 서버와 브라우저 간에 코드를 쉽게 공유할 수 있는 웹 애플리케이션을 만들 수 있습니다.
서버와 클라이언트 간의 일부 코드를 공유하고 싶을 때 가장 먼저 부딪히는 장벽이 Node.js에서 사용하는 모듈 시스템과 브라우저에서 사용하는 모듈 시스템의 이기종 환경 간의 불일치 입니다. 또한 브라우저에는 require() 함수나 모듈을 해결할 수 있는 파일 시스템이 없다는 점도 명시해야 합니다. 이러한 문제점들을 해결해 주는 것이 모듈 번들러 입니다.
모듈 번들러는 서버와 브라우저 모두에서 최대한 원활하게 작동할 수 있는 코드의 상당부분을 빌드 시 모든 종속성과 함께 번들하는데 도움을 주는 도구입니다. 종속성을 해결하고, 모듈맵을 가져와서 실행 가능한 번들 파일로 패킹해주는 대표적인 모듈 번들러 웹팩을 배워보도록 하겠습니다.
먼저 CLI 상에서의 웹팩의 실행법을 이해하고, 웹팩의 Config파일을 통해 추가기능 사항들을 알아보도록 하겠습니다.
# Contents
CLI 에서의 기본적인 웹팩 실행법
Config를 이용한 웹팩 사용법
# CLI 에서의 기본적인 웹팩 실행법
웹팩의 사용법은 공식사이트인 https://webpack.kr/guides/getting-started/ 를 참고하였습니다.
1. 프로젝트 생성
먼저 웹팩을 이용하기 전에 Node.js 프로젝트를 생성해야 합니다. Node.js 프로젝트를 생성하시려면 Node.js 가 설치되어 있어야 하겠죠?? 웹팩은 최소 Node.js 버전은 10.13.0(LTS) 이라고 합니다. 자신의 노드 버전을 확인하여 지원안되는 버전이라고 생각하시면 업그레이드를 해 주시기 바랍니다.
아래 명령어를 통해 프로젝트를 생성합니다.
mkdir webpack-demo cd webpack-demo npm init -y npm install webpack webpack-cli lodash --save-dev
위 명령어를 통해 프로젝트의 생성과 동시에 웹팩에 필요한 모듈도 설치가 되었습니다. 생성된 프로젝트에서 기본적인 자바스크립트 코드를 사용하여 테스트를 진행해 볼 예정입니다. 다음 코드를 src/index.js 에 입력하시기 바랍니다.
const message = document.createTextNode("Webpack Example"); document.body.appendChild(message);
그리고 아래 HTML을 생성하여 위에서 생성한 자바스크립트 코드를 넣어주도록 합시다. 그러면 Body 태그 제일 끝에 TextNode가 생성되어 Webpack Example이라는 내용이 적용될 것입니다. 아래 코드를 index.html 에 입력하시기 바랍니다.
Document
해당 결과 내용은 아래와 같습니다. 일반 브라우저에서는 import 모듈을 사용할 수 없음을 확인하실 수 있습니다.
2. 모듈 번들러 웹팩 사용
일반 브라우저에서는 import 구문을 사용하지 못한다는 것에 대해 이해하였습니다. 웹팩을 사용하여 import/export 를 적용하여 브라우저와 서버와의 다른 환경에서 구문이 동일한 상황이라도 수정하지 않고 적용해보도록 하겠습니다.
아래 명령어를 통해 모듈을 번들해봅시다.
npx webpack
해당 명령어를 사용하게 되면 웹팩에 관련된 로그들과 함께 성공적으로 번들하여 패킹된 파일이 dist 폴더에 나오게 됩니다.
main이라는 파일이 나오게 되면 index.html 에서 정의했던 자바스크립트를 dist/main.js로 변경하여 다시 실행시켜 주세요. 그러면 우리가 출력하고자 하는 내용들이 정상적으로 출력됩니다.
우린 성공적으로 웹팩을 사용하여 import 구문을 브라우저에서도 적용시켜 보았습니다. 지금 예제는 아주 간단하고 기초적인 예제로써 웹팩의 부가적인 기능은 Config 파일을 정의하여 추가시킬 수 있는데요. 간단하게 적용시키실 개발자님께서는 여기서 마무리해주시고, 추가적인 기능을 원하신다고 생각하시면 아래 글을 읽어주세요.
# Config를 이용한 웹팩 사용법
정한 규칙을 따릅니다. 이 규칙은 Node.js 코어 API에 적용되지만 대다수의 사용자 영역 모듈과 애플리케이션에도 적용됩니다. 따라서 콜백이 사용되는 비동기 API를 설계할 때마다 이를 이해하고 반드시 준수 해야 합니다.
콜백은 맨 마지막에
오류는 맨 처음에
오류 전파
캐치되지 않는 예외 - try, catch
process.on("uncaughtException", (err) => { console.error(`This is uncaughtException : ${err}`); process.exit(1); });
캐치되지 않는 예외가 애플리케이션의 일관성을 보장할 수 없는 상태로 만듭니다. 이로 인해 예기치 않는 문제가 발생할 수 있음을 이해하는 것이 중요합니다.
from http://junhokims.tistory.com/47 by ccl(A) rewrite - 2021-10-12 09:26:08