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 로 빌드한 결과물은 파일로 생성되지 않고 메모리에 저장됩니다.그래서 개발자가 소스 코드를 수정할 때마다, 즉시 메모리에서 새로운 빌드 결과물을 제공할 수 있는 것입니..

따라하기1. package.json 파일 생성을 위해 다음 명령어 실행npm init -y 2. 필요한 라이브러리 설치를 위해 다음 명령어 실행npm i webpack webpack-cli webpack-dev-server html-webpack-plugin -D 3. package.json 파일의 scripts 속성에 커스텀 명령어 "dev" 추가{ ... "scripts": { "dev": "webpack server" },} 4. 프로젝트 최상위 레벨에 index.html 파일 생성 후 아래 내용 작성 Load..  5. 프로젝트 root 레벨에 index.js 파일을 생성하고 아래 내용 작성var div = document.querySelector('.c..

자주 사용하는 주요 속성들은 다음과 같습니다.// 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 ..