# 웹팩

27개의 포스트
post-thumbnail

WebPack 개요

이야기하기 전에 먼저 이것이 제 첫 게시글임에 굉장히 설렙니다. 항상 공부하며 막히는 것이 있을 때 다른 누군가의 블로그를 많이 참고했는데 이제 저도 블로그를 써보네요. 공부하며 틈틈히 기록할수있도록 하겠습니다.번들러는 기본적으로 여러 모듈들을 하나의 파일로 묶어주는

2021년 1월 3일
·
0개의 댓글

웹팩 설정하기

여러개의 나누어져 있는 자바스크립트 파일들을 하나의 파일로 만들어주는 라이브러리자바스크립트 코드들을 압축하고 최적화 할 수 있기 때문에 로딩 속도를 높일 수 있다.webpack.config.js 파일 생성 및 작성entry : 웹팩이 빌드할 파일을 알려주는 역할outp

2020년 12월 31일
·
0개의 댓글
post-thumbnail

Webpack 코드 스플리팅 사용 안하는 방법 (splitChunks)

아래 내용은 Vue.config.js에 웹팩 설정을 적용한 내용이지만,단순히 웹팩 기능을 사용하지 않는 코드라서 다른 환경에도 적용이 가능할 것 같습니다.또는

2020년 12월 12일
·
0개의 댓글

'프론트엔드 개발환경의 이해'를 읽고

유튜브 양재동 코드랩에서 우연히 '프론트엔드 개발환경의 이해'라는 영상을 보다가 찾아보았다. 김정환님의 블로그에 잘 정리되어 있어서 읽어보았는데 그동안 매번 쓰면서 뭔가 했던 내용들을 깔끔하게 정리해주었다.연재는 총 5편으로 진행된다.NPMnode.js의 설치부터 pa

2020년 12월 7일
·
0개의 댓글
post-thumbnail

[React] Start to React

> What is React? **"사용자 인터페이스를 만들기 위한 JavaScript 라이브러리" ** 공부를 하다보면 리액트를 라이브러리로 봐야하는가 프레임워크를 봐야하는지의 논의가 자주 등장한다. 나의 생각을 말

2020년 11월 9일
·
0개의 댓글
post-thumbnail

TIL 70 | Webpack 사용하여 개발 환경 구축하기

리액트 웹팩으로 개발환경 구축하기(without CRA)

2020년 10월 18일
·
0개의 댓글
post-thumbnail

TIL DAY.32 [Vue.js] 웹팩 사용하기 2

웹팩 이어서 공부하기

2020년 10월 18일
·
0개의 댓글
post-thumbnail

[JavaScript] Webpack - Module 기본

Webpack의 기본구조와 내보내고 가져오는 방법에 대해서 알아보도록 합시다!

2020년 10월 18일
·
0개의 댓글
post-thumbnail

TIL 69 | Webpack Basics

리액트를 공부하면서 항상 CRA를 사용해서 초기 개발 환경을 구축했는데, 다음주부터 나가는 기업협업에서는 웹팩을 사용한다는 이야기를 선배 기수에게 들었다. 미리 웹팩을 훑고 가면 좋다는 조언을 듣고, 여러 블로그와 유튜브를 찾아보며 웹팩을 이해해보고 있다!

2020년 10월 18일
·
2개의 댓글
post-thumbnail

TIL DAY.31 [Vue.js] 웹팩 사용하기

https://media.vlpt.us/post-images/katanazero86/aba9c930-4af7-11ea-b431-d56bc1d096a4/vuejs-tutorial2d2a853c-aa2f-44b0-80df-933b495f77f8.png벌써 개발자로

2020년 10월 17일
·
3개의 댓글
post-thumbnail

플러그인, 완성도를 높이다

지난 포스팅에서 `rollup.js` 를 이용해 두 개의 자바스크립트 파일을 하나로 묶고, `rollup.config.js` 파일을 구성해서 CLI가 아닌 스크립트로 설정 파일을 관리하는 것 까지 진행했습니다. 이번 시간에는 `rollup` 에 날개를 달아줄 플러그

2020년 9월 22일
·
0개의 댓글
post-thumbnail

번들링, 파일을 하나로 합쳐보자

rollup.js는 자바스크립트 번들러입니다. webpack이나 parcel이랑 비슷하다고 생각하시면 됩니다. 다수의 파일들을 하나의 파일로 묶어서 성능이나 재사용성 부분에서 이득을 가져올 수 있는거죠.타 번들러와의 차별점이라면 CommonJS 방식을 사용하지 않고 표

2020년 9월 21일
·
0개의 댓글

[Bundlers] 2. Webpack 이란?

의존 관계에 있는 모듈들을 하나의 자바스크립트 파일로 번들링 하는 모듈 번들러별도의 모듈 로더가 필요없어짐하나의 파일로 번들링함으로 다수의 스크립트 파일을 로드할 필요 없어짐Webpack으로 파일 번들링 전에 babel 을 이용해서 ES6+ 코드를 ES5코드로 트랜스파

2020년 9월 19일
·
1개의 댓글

프론트엔드 개발환경의 이해 (웹팩)

package.json의 "main": "index.js"는 node 서버 개발 환경에서 사용하는 것이므로 무시해도 된다."react": "^16.13.1"유의적 버전(Sementic Version)이다. 버전 번호를 관리하기 위한 규칙 체계주 버전 / 부 버전 / 수

2020년 8월 28일
·
0개의 댓글

webpack 기초개념 & 기본 설정

Reference : webpack.docswebpack은 모든 file을 module로 간주하며project에 필요한 모든 모듈을 dependency graph에 따라 번들링하는 도구이다.번들링된 결과물을 bundle이라 한다.EntryOutputLoadersPlug

2020년 8월 23일
·
0개의 댓글

React #06 웹팩 설정

참고웹 개발은 JS 비중이 매우 크다. 따라서 페이지 로딩시 많은 스크립트를 로드할 경우 http 병목현상이 생길 수 있다.웹 팩은 많은 JS파일을 하나의 Bundle파일로 만들어서 이런 현상을 없애기 위함이다.그러나, 모든 파일을 하나로 합치면서 파일의 크기가 커진다

2020년 6월 28일
·
0개의 댓글
post-thumbnail

vue proxy 사용하기

vue cli 3.x 버전 이상에서 웹팩 개발서버를 이용해서 프록시 요청을 보내봅시다.

2020년 6월 20일
·
3개의 댓글

Webpack

웹팩, 바벨

2020년 3월 28일
·
0개의 댓글