Mode웹팩 실행 시 mode 라는 속성으로 세가지 모드를 설정할 수 있으며, 설정하지 않으면 기본으로 production 모드가 실행됩니다.none모드 설정 안 함development개발 모드웹팩 로그, 결과물 제공production배포 모드성능 최적화를 위해 최종 번들의 크기를 줄이고 파일을 압축하는 등의 작업 수행// webpack.config.jsmodule.exports = { mode: 'none'. entry: '', ...}  실행 모드에 따라 웹팩 설정 달리하기웹팩으로 실제 애플리케이션을 개발할 때는 개발할 때와 개발 후 배포할 때를 구분하여 웹팩을 설정해주어야 합니다.예시) 웹팩 설정 파일이 1개인 상태에서 웹팩 설정 분기 처리// webpack.config.jsmodu..

devServer개발자가 애플리케이션을 개발할 때 편리하게 사용할 수 있는 기능을 제공하는 속성입니다. 주요 기능은 다음과 같습니다.Live Reloading: 소스 코드 변경 후 해당 파일에 대한 빌드 명령어를 실행하지 않아도 자동으로 빌드 되어 브라우저가 새로고침 됨Hot Module 교체: 애플리케이션의 특정 모듈이 변경되었을 때 전체 페이지를 새로고침 하지 않고 변경된 부분만 실시간으로 교체하여 빠른 개발 사이클 지원디버깅 지원: Source Maps 를 통해 브라우저 디버깅 도구에서 원본 소스를 기반으로 디버깅 가능devServer 로 빌드한 결과물은 파일로 생성되지 않고 메모리에 저장됩니다.그래서 개발자가 소스 코드를 수정할 때마다, 즉시 메모리에서 새로운 빌드 결과물을 제공할 수 있는 것입니..

자주 사용하는 주요 속성들은 다음과 같습니다.// webpack.config.jsmodule.exports = { entry: '', output: '', module: '', plugin: '' ...} Entry애플리케이션의 번들링 시작점(파일 경로)을 설정하는 속성입니다.entry 속성은 웹 애플리케이션에서 사용되는 모듈들의 연관 관계를 이해하고 분석하기 때문에 entry 파일에 애플리케이션을 동작시킬 수 있는 내용들이 담겨져 있어야 합니다. (Javascript 파일, 스타일 시트, 설정 파일 등) 예시) 영화 웹 서비스 싱글 페이지 웹팩 빌드// webpack.config.jsmodule.exports = { entry: './src/index.js'}// src/index..

웹팩 실행을 위한 개발 환경Node.js LTS 버전 10 이상NPM 버전 6 이상 웹 페이지 자원 구성1. 빈 폴더에 package.json 파일을 생성합니다.npm init -y 2. 같은 경로에 웹팩 관련 라이브러리와 lodash 라이브러리를 설치합니다.npm i webpack webpack-cli -Dnpm i lodash 3. index.html 파일을 생성하고 아래 내용을 추가합니다.  4. 프로젝트 루트 레벨에 src 폴더를 생성하고 index.js 파일을 생성합니다.function component() { var element = document.createElement('div'); /* lodash is required for the next line to work ..

Node.js 와 NPM을 알면 웹팩을 다루기 용이해집니다. Node.js자바스크립트 코드를 서버에서 실행하기 위한 런타임 환경입니다.자바스크립트를 백엔드에서도 사용할 수 있기 때문에 전체 애플리케이션을 하나의 언어로 작성할 수 있습니다. Node.js 실행App.js 파일에서 다음 명령어를 입력하고 ,// App.jsconsole.log('hello')터미널을 이용하여 해당 경로에서 node 명령어로 파일을 실행하면 "hello"가 출력됩니다.node App.js  NPM(Node Package Manager)자바스크립트의 패키지 관리자입니다.Node.js 의 기본 패키지 관리자 역할을 하며, 애플리케이션을 개발할 때 다양한 라이브러리와 도구를 설치하고 관리하도록 도와줍니다.*NPM 은 Node.js ..

왜 웹팩을 사용할까?자바스크립트 파일의 의존성 관리 문제웹 애플리케이션이 점점 복잡해지고 대규모화되면서 코드 관리와 의존성 관리에 어려움이 생겼습니다. 자바스크립트의 변수는 전역적인 유효 범위를 갖기 때문에 어디서든 쉽게 접근이 가능해집니다. 얼핏 들으면 좋은 점같지만, 어디서든 접근이 가능한 경우 다음과 같은 문제가 발생합니다.// app.jsvar num = 10;function getNum() { console.log(num);}// main.jsvar num = 20;function getNum() { console.log(num);} 이때, 기대되는 num 의 값은 각각 10, 20이지만, 결과는 20만 출력됩니다.동일한 이름의 전역 변수를 구분 짓지 못하고 갚..