웹팩 WebPack 생성하기(1) webpack생성하기 ./ => 상대경로다 i -D (설치한다. -D 개발성 의존으로) webpack (webpack 패키지를 설치) webpack-cli, webpack-dev-server 두개의 패키지를 설치한다는 의미 @next 란? (webpack-cli와 webpack-dev-server 패키지 두개의 버전을 맞춰서 설치하기 위해서 붙이는 것입니다) 한번에 총 세개의 패키지를 설치 ... 웹팩webpackvueVisualStudioVisualStudio 웹팩 입문 웹팩을 이용하면 수백 개의 파일을 몇 개의 정적 파일, 그것도 아주 작은 용량으로 압축할 수 있다. 간단히 설명하자면 HTML 파일에서는 <script> tag로 js 파일을 불러오고, 해당 js 파일은 다른 js 파일, css 파일, 이미지 파일 등을 import한다. entry, output, loader, plugin, optimization 개념과 자주 쓰이는 라이브러리만 알면 어느 ... 개발 도구웹팩개발 도구 TIL DAY.31 [Vue.js] 웹팩 사용하기 여기서 모듈 번들러란 웹 애플리케이션을 구성하는 자원(HTML, CSS, Javascript)등 모두 각각의 모듈로 보고 이를 병합된 하나의 결과물을 만드는 도구를 의미한다. 즉 이처럼 성격이 비슷한 기능들을 하나의 의미 있는 파일로 관리하고 export를 통해서 해당 기능을 사용 할 수 있다. 위와 같이 웹 애플리케이션을 구성하는 많은 자원들을 하나로 병합하고 압축해주는 동작을 모듈 번들링... vue웹팩vue.jsTILTIL 웹팩 설정하기 여러개의 나누어져 있는 자바스크립트 파일들을 하나의 파일로 만들어주는 라이브러리 자바스크립트 코드들을 압축하고 최적화 할 수 있기 때문에 로딩 속도를 높일 수 있다. 웹팩으로 자바스크립트 파일 빌드하기 webpack.config.js 파일 생성 및 작성 entry : 웹팩이 빌드할 파일을 알려주는 역할 output : 웹팩에서 빌드를 완료하면 output에 명시되어 있는 정보를 통해 빌드 파... 웹팩웹팩 웹팩 빌드 속도 높이기 (feat. 타입체크와 트랜스파일링 분리) ❗️ CRA 없이 리액트 + 타입스크립트 프로젝트를 만드는 경우를 염두에 두고 쓴 글입니다. 학습중인 내용이므로 틀린 부분이 있을 수 있습니다. 댓글을 통한 모든 피드백은 환영입니다! 타입스크립트 + 리액트 프로젝트를 진행할 땐 타입스크립트를 로드해주는 모듈이 필수적입니다. 이 때 사용되는 모듈로는 ts-loader 또는 awesome-typescript-module 이 두 모듈이 대표적입니... 리액트웹팩리액트
WebPack 생성하기(1) webpack생성하기 ./ => 상대경로다 i -D (설치한다. -D 개발성 의존으로) webpack (webpack 패키지를 설치) webpack-cli, webpack-dev-server 두개의 패키지를 설치한다는 의미 @next 란? (webpack-cli와 webpack-dev-server 패키지 두개의 버전을 맞춰서 설치하기 위해서 붙이는 것입니다) 한번에 총 세개의 패키지를 설치 ... 웹팩webpackvueVisualStudioVisualStudio 웹팩 입문 웹팩을 이용하면 수백 개의 파일을 몇 개의 정적 파일, 그것도 아주 작은 용량으로 압축할 수 있다. 간단히 설명하자면 HTML 파일에서는 <script> tag로 js 파일을 불러오고, 해당 js 파일은 다른 js 파일, css 파일, 이미지 파일 등을 import한다. entry, output, loader, plugin, optimization 개념과 자주 쓰이는 라이브러리만 알면 어느 ... 개발 도구웹팩개발 도구 TIL DAY.31 [Vue.js] 웹팩 사용하기 여기서 모듈 번들러란 웹 애플리케이션을 구성하는 자원(HTML, CSS, Javascript)등 모두 각각의 모듈로 보고 이를 병합된 하나의 결과물을 만드는 도구를 의미한다. 즉 이처럼 성격이 비슷한 기능들을 하나의 의미 있는 파일로 관리하고 export를 통해서 해당 기능을 사용 할 수 있다. 위와 같이 웹 애플리케이션을 구성하는 많은 자원들을 하나로 병합하고 압축해주는 동작을 모듈 번들링... vue웹팩vue.jsTILTIL 웹팩 설정하기 여러개의 나누어져 있는 자바스크립트 파일들을 하나의 파일로 만들어주는 라이브러리 자바스크립트 코드들을 압축하고 최적화 할 수 있기 때문에 로딩 속도를 높일 수 있다. 웹팩으로 자바스크립트 파일 빌드하기 webpack.config.js 파일 생성 및 작성 entry : 웹팩이 빌드할 파일을 알려주는 역할 output : 웹팩에서 빌드를 완료하면 output에 명시되어 있는 정보를 통해 빌드 파... 웹팩웹팩 웹팩 빌드 속도 높이기 (feat. 타입체크와 트랜스파일링 분리) ❗️ CRA 없이 리액트 + 타입스크립트 프로젝트를 만드는 경우를 염두에 두고 쓴 글입니다. 학습중인 내용이므로 틀린 부분이 있을 수 있습니다. 댓글을 통한 모든 피드백은 환영입니다! 타입스크립트 + 리액트 프로젝트를 진행할 땐 타입스크립트를 로드해주는 모듈이 필수적입니다. 이 때 사용되는 모듈로는 ts-loader 또는 awesome-typescript-module 이 두 모듈이 대표적입니... 리액트웹팩리액트