# 웹팩
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 ...
Webpack 시작하기
webpack은 여러 개의 assets (js, css, png, jpg)을 웹 브라우저가 이해할 수 있는 번들로 묶고 패킹할 수 있는 자바스크립트 모듈 번들러이다. Node.js 환경에서 실행되며, npm으로 설치할 수 있다. 웹팩을 사용하는 이유 각기 다른 자바스크립트를 로딩할 때, 스크립트 로딩 순서와 해당 HTML에서 필요하지 않은 js 파일들까지...
