webpack4. config(2) - Entry & Context 목차 entry란? 객체 문법 간단 문법 context 1. entry란? 어플리케이션 번들 처리를 시작할 지점 만약 엔트리가 배열로 전달될 시, 배열의 모든 항목이 처리됨 동적으로 로드된 모듈은 엔트리 포인트가 아님 HTML 페이징 하나당 하나의 엔트리 포인트를 가짐 SPA: 하나의 엔트리 포인트 MPA: 다중의 엔트리 포인트 2. entry 객체를 작성하는 문법1 - 객체 문법 재사용 가능하며 configurations의 다른 부분들과 결합 가능 주로 환경, 타겟 설정, 런타임 별로 관심사를 분리하기 위해 사용되는 방법이며 이후 webpack-merge와 같은 도구로 합병(merge)됨 플러그인에 의해 생성된 진입점만 존재한다면 entry로 빈 객체만을 넘겨도 됨 2-1. 속성 (1) dependOn.. 2022. 4. 19. webpack4. config(1) 1. configuration 설정을 위해 configuration file을 반드시 작성해야 하는 것은 아니다. 웹팩은 프로젝트의 진입점을 src/index.js로, 출력물의 경로를 dist/main.js로 가정한다.(디폴트) 프로젝트 기능을 확장시키고자 할 때, root 폴더 안에 webpack.config.js 파일을 생성하면 웹팩이 자동적으로 사용 웹팩은 plugins 기본값이 적용된 후 configuration 기본값을 적용함 2. 상황에 따라 다른 설정 파일을 사용할 경우, 2-1. package.json에 작성하는 방법 "scripts": { "build": "webpack --config prod.config.js" } 2-2. 커맨드 라인으로 작성하는 방법 $ npx webpack --c.. 2022. 4. 19. webpack3. 수업 내용 [ 수정중 ] 목차 하드코딩 moment 라이브러리 사용 webpack 및 webpacli + moment 사용 미션: 1초마다 시간이 1초씩 증가하는 코드를 작성해보자. 방법1. 하드코딩 아래와 같이 Date() 메서드와 새로운 객체를 생성하는 new 키워드를 작성하면 된다. 방법2. moment 라이브러리 사용 위의 복잡해보이는 코드는 moment라는 라이브러리를 사용해서 간편하게 작성 가능하다 우선 라이브러리를 설치하는 커맨드를 입력해서 moment를 설치해보자 1. 모멘트 라이브러리 설치 $ npm install moment 2. 코드 작성 방법3. webpack + moment 라이브러리 사용 위의 코드를 webpack을 사용해서 한꺼번에 처리해보자 1. webpack과 webpack-cli 설치 $ npm .. 2022. 4. 19. webpack2. 개념 목차 웹팩이란? 웹팩을 이해하기 위한 핵심 개념(entry / output / loaders / plugin / mode / browser compatibility ) 진입점(entry point) 출력(output) 로더(loaders) 플러그인(plugin) 모드(mode) 브라우저 호환성(browser compatibility) 환경(environment) 1. 웹팩이란? 웹팩은 모던 자바스크립트 어플리케이션을 위한 정적 모듈 번들러 웹팩이 어플리케이션을 다룰 때, 내부적으로 하나 또는 다수의 entry points로부터 dependency graph를 만든다. 프로젝트에 필요한 모든 모듈을, 컨텐츠를 제공할 정적 자산 인 번들로 결합 2. 웹팩을 이해하기 위한 핵심 개념 진입(Entry) 출력(O.. 2022. 4. 18. webpack1. 모듈과 추상화 목차 모듈 추상화(abstraction) 개념 웹팩 모듈 웹팩에서 지원하는 모듈의 유형들 1. 모듈 1-1. 모듈방식 프로그래밍 모듈방식 프로그래밍에서 개발자들은 프로그램들을 모듈이라고 불리는 개별 기능상의 덩어리들로 쪼갠다. 각각의 모듈은 검증생성, 디버깅, 세부 사항 테스트하기 등 완전한 프로그램보다 더 작은 표면을 가진다. 잘 작성된 모듈은 완전한 추상화와 캡슐 경계를 제공하며, 각각의 모듈들은 전체 어플리케이션 내에서 논리적으로 일관적인 디자인과 명확한 목적을 가지게 된다. 1-2. 모듈의 특성 식별가능한 유일한 이름을 가짐 독립적으로 컴파일됨 독립적인 기능을 가져야 함 다른 프로그램 또는 다른 모듈에서 사용 가능 모듈 자체로서 재사용 가능 2. 추상화 (Abstraction) 2-1. 추상화 개.. 2022. 4. 18. 이전 1 다음
