# 번들링

13개의 포스트
post-thumbnail

React ECharts 번들링 사이즈 줄이기

프로젝트를 빌드하면서 번들링 파일을 분석하는데 echarts-for-react 번들링 사이즈가 생각보다 매우 컸다. 막상 사용한 차트는 몇 종류 안되는데 echarts-for-react 번들링 사이즈는 거의 1MB에 육박했다. (echarts-for-react에 대해

2022년 5월 4일
·
0개의 댓글
post-thumbnail

#52. 번들링과 웹팩, 바벨

모듈과 번들링이 탄생하게 된 계기를 알아봅니다. 그리고나서 번들링과 대표적인 번들러 웹팩, 트랜스파일러 바벨에 대해서 간단하게 정리합니다. 추가적으로 알아야 할 질문들에 대해 살펴봅시다!

2022년 4월 12일
·
0개의 댓글
post-thumbnail

웹팩이란?

※패스트 캠퍼스 강의 프론트엔드 개발 올인원 패키지를 참고하여 웹팩 개념을 적은 것입니다.

2022년 3월 20일
·
0개의 댓글
post-thumbnail

번들링과 웹팩

웹 개발 초기와 달리 현재의 웹 개발은 훨씬 복잡해지고 인터랙티브 해졌습니다. 그렇기 때문에 초기의 방식을 사용하게 되면변수 이름의 충돌 가능성많은 js 파일 다운로드로 인한 네트워크 부하수동적인 반복 작업 (파일, 이미지 압축 등)위와 같은 부작용이 발생하였습니다.그

2022년 3월 1일
·
0개의 댓글
post-thumbnail

웹팩 실시간으로 확인하기

우리가 계속 페이지를 제작할 때 마다 웹팩을 실행하는 것이 약간 번거로울 때가 있다.제작중인 파일을 실시간으로 확인할 수 있는 방법을 알아보자수정된 파일 지켜보기source 내에 파일이 변경되었을때 실시간으로 자동으로 컴파일을 다시 해준다.이제 public 폴더 내에

2022년 1월 4일
·
0개의 댓글
post-thumbnail

Plugin의 도입

웹팩에는 두가지 형태의 확장 기능이 있다. 로더 : 우리가 갖고 있는 모듈을 output을 거치는 과정을 사용되는 기능 플러그인 :

2022년 1월 4일
·
0개의 댓글
post-thumbnail

output 설정하기

우리는 당연히 하나의 페이지만 제작을 하지 않을 것이다.일단은 임시로 about.html 파일을 제작하고, index.html파일을 수정한다.about.htmlabout 페이지는 source폴더 내에 index_bundle.js가 아닌 about_bundle.js파일을

2022년 1월 4일
·
0개의 댓글
post-thumbnail

로더 도입하기

이제 CSS를 적용할 로더를 도입해 보자최종 폴더에 style.css 파일을 생성index.html에 css 적용라이브 서버 실행 결과위 처럼 css파일 추가와 페이지 스타일이 변경된 것을 확인할 수 있다.여기서 아쉬운점은 자바스크립트 파일은 번들링 되어있지만 css파

2022년 1월 4일
·
0개의 댓글
post-thumbnail

모드 도입하기

모드 옵션을 사용시 웹팩에 내장된 최적화 된 기능을 사용할 수있다.옵션을 설명하자면 아래를 확인해 보자development : DefinePlugin의 process.env.NODE_ENV를 development로 설정한다.모듈과 청크에 유용한 이름을 사용할 수 있다.

2022년 1월 4일
·
0개의 댓글
post-thumbnail

설정 파일 도입하기

이전에 사용한 터미널 명령어를 다시 확인해보자위 코드는 다시 적기엔 너무 길고 귀찮다.webpack.config.js 설정파일 도입웹팩 설정 파일을 생성해보자 최종 루트 폴더에 webpack.config.js 파일을 생성한다.webpack.config.js 파일 내 아

2022년 1월 4일
·
0개의 댓글
post-thumbnail

Webpack 시작

웹팩은 여러 .js, .sass, .css 파일들을 번들링 해줌으로써 웹페이지의 속도와 용량을 최적화 해주는 역할을 한다.우선 임시로 파일을 만들어보자index.htmlhello.jsworld.jsindex.js해당 디렉토리 폴더에 웹팩을 설치먼저 해당 폴더 터미널을

2022년 1월 4일
·
0개의 댓글

웹팩

웹팩은 다양한 기능을 제공한다 파일내용을 기반으로 파일 이름에 해시값 추가 사용되지않는 코드제거 자바스크립트 압축 JS에서 CSS, JSON, TXT파일 등을 일반 모듈처럼 불러오기 환경변수주입 모듈시스템(ESM / commonJS) 사용 웹팩실행법 npm ins

2021년 10월 15일
·
0개의 댓글
post-thumbnail

Vue 번들 크기 줄이기

Vue 번들 크기 줄이기 번들링 도구를 사용하여 자바스크립트를 번들링하는 경우, 모든 내용이 하나로 합쳐진 큰 파일이 생성되게 됩니다. 브라우저에서 하나의 큰 파일을 로딩하는 경우에는 많은 초기 로딩 시간이 소요될 수 있습니다. 아래에서는 자바스크립트 번들 크기를 줄이는 방법 몇 가지를 간략히 설명합니다. 이 글은 Vue + Webpack4 기준으로 작...

2019년 10월 7일
·
0개의 댓글