# 웹팩
TIL 69 | Webpack Basics
리액트를 공부하면서 항상 CRA를 사용해서 초기 개발 환경을 구축했는데, 다음주부터 나가는 기업협업에서는 웹팩을 사용한다는 이야기를 선배 기수에게 들었다. 미리 웹팩을 훑고 가면 좋다는 조언을 듣고, 여러 블로그와 유튜브를 찾아보며 웹팩을 이해해보고 있다!
TIL DAY.31 [Vue.js] 웹팩 사용하기
https://media.vlpt.us/post-images/katanazero86/aba9c930-4af7-11ea-b431-d56bc1d096a4/vuejs-tutorial2d2a853c-aa2f-44b0-80df-933b495f77f8.png벌써 개발자로
플러그인, 완성도를 높이다
지난 포스팅에서 `rollup.js` 를 이용해 두 개의 자바스크립트 파일을 하나로 묶고, `rollup.config.js` 파일을 구성해서 CLI가 아닌 스크립트로 설정 파일을 관리하는 것 까지 진행했습니다. 이번 시간에는 `rollup` 에 날개를 달아줄 플러그
번들링, 파일을 하나로 합쳐보자
rollup.js는 자바스크립트 번들러입니다. webpack이나 parcel이랑 비슷하다고 생각하시면 됩니다. 다수의 파일들을 하나의 파일로 묶어서 성능이나 재사용성 부분에서 이득을 가져올 수 있는거죠.타 번들러와의 차별점이라면 CommonJS 방식을 사용하지 않고 표
[Bundlers] 2. Webpack 이란?
의존 관계에 있는 모듈들을 하나의 자바스크립트 파일로 번들링 하는 모듈 번들러별도의 모듈 로더가 필요없어짐하나의 파일로 번들링함으로 다수의 스크립트 파일을 로드할 필요 없어짐Webpack으로 파일 번들링 전에 babel 을 이용해서 ES6+ 코드를 ES5코드로 트랜스파
프론트엔드 개발환경의 이해 (웹팩)
package.json의 "main": "index.js"는 node 서버 개발 환경에서 사용하는 것이므로 무시해도 된다."react": "^16.13.1"유의적 버전(Sementic Version)이다. 버전 번호를 관리하기 위한 규칙 체계주 버전 / 부 버전 / 수
webpack 기초개념 & 기본 설정
Reference : webpack.docswebpack은 모든 file을 module로 간주하며project에 필요한 모든 모듈을 dependency graph에 따라 번들링하는 도구이다.번들링된 결과물을 bundle이라 한다.EntryOutputLoadersPlug
React #06 웹팩 설정
참고웹 개발은 JS 비중이 매우 크다. 따라서 페이지 로딩시 많은 스크립트를 로드할 경우 http 병목현상이 생길 수 있다.웹 팩은 많은 JS파일을 하나의 Bundle파일로 만들어서 이런 현상을 없애기 위함이다.그러나, 모든 파일을 하나로 합치면서 파일의 크기가 커진다
React webpack사용하기 (Babel, webpack-dev-server)
React webpack 설치 방법 (Babel, webpack-dev-server)
parcel 기초 세팅
오늘은 웹 어플리케이션 번들러 3대장webpack, rollup, parcel중 하나인 parcel의 세팅 방법에 대해 알아보겠습니다. 물론 알아볼 것도 없이 parcel 홈페이지가 워낙 번역이 잘되어 있긴 합니다 ㅎㅎ;; 그래도 세팅이 어려운 분들을 위해 작성해봅니다. 시작하기 먼저 parcel을 실행하려면 parcel을 설치해야겠죠? Yarn:...
웹팩으로 리액트 시작하기
react 시작하기 + webpack + babel + sass 설정 리액트를 정리하기 위한 블로그입니다. 잘못된 개념의 경우는 피드백 주시면 감사하겠습니다. 리액트 왜 쓸까요? 사용자 인터페이스를 만들기 위한 Javascript 라이브러리 프레임워크라고 생각하고 있습니다. 사용자 인터페이스가 영어로 줄이면 UI죠. 버튼, 메뉴, 링크 이런걸 얘기하겠...
webpack-dev-server 사용하기(=삽질후기)
프론트에서 js모듈화를 진행하기 위해 babel과 webpack을 적용하였다. ES6 최신문법을 브라우저에서도 사용하기 위해서 babel을 적용하고, 그걸 하나로 뭉쳐주기 위해(?) webpack을 적용하였다. 그렇게 한 결과 html 뷰에서 webpack으로
Webpack 설정하기
webpack.config.js 파일을 생성하여 config 객체를 이용해서 module.exports를 통해 외부로 노출시킬 수 있다. config 파일은 mode, entry, output, module, plugins를 제공한다. 모드 (mode) devoplement면 개발용, production이면 배포용이다. webpack.config.js ...