# 웹팩
.gif?w=768)
Webpack으로 React.js 개발환경 build하기 - 2. webpack.config.js 세팅
🔗설치한 라이브러리들을 바탕으로 config file을 설정해줍니다.
.gif?w=768)
Webpack으로 React.js 개발환경 build하기 - 1. 프로젝트 시작하기
보통 리액트 애플리케이션을 만들 때 CRA (create-react-app)라는 잘 만들어진 리액트 boilerplate를 정석처럼 쓰곤합니다.저도 직접 리액트 개발환경을 build하며 수많은 에러를 겪고 유지보수에 힘을 쏟는 대신 CRA로 많은 사이드 프로젝트들을 진
[react]웹팩(webpack)
자바스크립트를 사용하여 웹 애플리케이션을 만들다보면 이 2가지 방법을 통해 설치한 모듈(module)을 객체로 불러온다. 근데 사실 이러한 기능은 웹 브라우저가 아닌 자바스크립트 런타임인 Nodejs가 지원하는 기능이다. 따라서 서버쪽 코드는 Nodejs를 통해 실행
웹팩5 HMR이 동작을 안 한다??
웹팩5를 쓰면서 잘 되던 HMR이 갑자기 동작을 안 한다. 너무 불편하다 하나를 바꿀 때마다 새로고침을 해주어야 한다.왜 그럴까... 찾아보니 target에 es5 를 추가 하면 안 된다고 하는 것 같다...아까 IE를 지원 하기 위해서 target: 'web'인 것을
크로스 브라우징 Cross-browsing 이란? (Pollyfill 폴리필, Babel 바벨, Webpack웹팩)
Croos Browsing이란 적어도 표준 웹기술을 채용하여 다른 기종 혹은 플랫폼에 따라 달리 구현되는 기술을 비슷하게 만듦과 동시에 어느 한쪽에 최적화되어 치우지지 않도록 공통 요소를 사용하여 웹 페이지를 제작하는 기법을 말하는 것이다. 또한, 지원할 수 없는 다른
WebPack 개요
이야기하기 전에 먼저 이것이 제 첫 게시글임에 굉장히 설렙니다. 항상 공부하며 막히는 것이 있을 때 다른 누군가의 블로그를 많이 참고했는데 이제 저도 블로그를 써보네요. 공부하며 틈틈히 기록할수있도록 하겠습니다.번들러는 기본적으로 여러 모듈들을 하나의 파일로 묶어주는
웹팩 설정하기
여러개의 나누어져 있는 자바스크립트 파일들을 하나의 파일로 만들어주는 라이브러리자바스크립트 코드들을 압축하고 최적화 할 수 있기 때문에 로딩 속도를 높일 수 있다.webpack.config.js 파일 생성 및 작성entry : 웹팩이 빌드할 파일을 알려주는 역할outp
Webpack 코드 스플리팅 사용 안하는 방법 (splitChunks)
아래 내용은 Vue.config.js에 웹팩 설정을 적용한 내용이지만,단순히 웹팩 기능을 사용하지 않는 코드라서 다른 환경에도 적용이 가능할 것 같습니다.또는
'프론트엔드 개발환경의 이해'를 읽고
유튜브 양재동 코드랩에서 우연히 '프론트엔드 개발환경의 이해'라는 영상을 보다가 찾아보았다. 김정환님의 블로그에 잘 정리되어 있어서 읽어보았는데 그동안 매번 쓰면서 뭔가 했던 내용들을 깔끔하게 정리해주었다.연재는 총 5편으로 진행된다.NPMnode.js의 설치부터 pa
[React] Start to React
> What is React? **"사용자 인터페이스를 만들기 위한 JavaScript 라이브러리" ** 공부를 하다보면 리액트를 라이브러리로 봐야하는가 프레임워크를 봐야하는지의 논의가 자주 등장한다. 나의 생각을 말
.png?w=768)
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벌써 개발자로
[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