# 웹팩
Webpack 기본적인 사용법
우선 로컬에 웹팩을 설치한다. 터미널에서 명령어로 실행하기 위해 webpack-cli도 함께 설치하자. 웹팩은 테스트 도구인 cypress와 마찬가지로, 배포할 때 필요한 패키지가 아니라 개발할 때 필요한 패키지이니까 -D 또는 --save-dev 옵션을 준다. 그러면
CommonJS, esModule 번들링 결과 비교하기
타입스크립트와 웹팩을 이용하여 CommonJS와 esModule의 차이점을 비교하려고 합니다. 그전에 자바스크립트가 지원하는 모듈이 정확히 무엇인지 모르시다면 링크를 봐주시기 바랍니다. 이 포스트를 쓰게 된 이유는 문든 tsconfig.json에서 module을 수정하다가 CommonJS, ES2015, ... , ESNext 등 종류가 많은데 무엇을 사용...
#52. 번들링과 웹팩, 바벨
모듈과 번들링이 탄생하게 된 계기를 알아봅니다. 그리고나서 번들링과 대표적인 번들러 웹팩, 트랜스파일러 바벨에 대해서 간단하게 정리합니다. 추가적으로 알아야 할 질문들에 대해 살펴봅시다!
[webpack]file-loader 로 html에서 이미지 참조하기
VanillaJS 로 프로젝트를 진행하는 과정에서 웹팩을 활용해서 이미지를 빌드하는 방법에 대한 게시글입니다. 웹팩 기본 설정에 대한 기초 지식이 있는 상태라고 가정하고 글을 작성한 점 참고바랍니다.index.html 에서 <img src="./images/clo
webpack - 1
웹팩은 여러개 파일을 하나의 파일로 합쳐주는 번들러이다. 하나의 시작점(entry point)로 부터 의존적인 모듈을 모두 찾아내어 하나의 결과물을 만들어낸다.package.json의 script에 build: webpack로 설정을 한다.이제 webpack.confi
번들링과 웹팩
웹 개발 초기와 달리 현재의 웹 개발은 훨씬 복잡해지고 인터랙티브 해졌습니다. 그렇기 때문에 초기의 방식을 사용하게 되면변수 이름의 충돌 가능성많은 js 파일 다운로드로 인한 네트워크 부하수동적인 반복 작업 (파일, 이미지 압축 등)위와 같은 부작용이 발생하였습니다.그
모듈 시스템과 Webpack(1)
리액트를 공부하고, 리액트 프로젝트를 진행하며 모듈 시스템을 이용해 컴포넌트 주도 개발을 할 때 Webpack과 같은 번들러의 역할이 중요하다는 것을 알게 되었다. 이 글을 통해서 리액트 개발 시 웹팩이 필요한 이유와 웹팩 설정 방법을 정리해본다...
웹팩(Webpack) & 바벨(Babel)
리액트(React)를 처음 시작하게 되면 웹 개발을 많이 또는 최근에 안해본 사람들은 용어에서 부터 일단 장벽이 생긴다. 복잡하고 알 수 없는 용어들이 머릿속에 정리되지 않은 채 필수(?) 라이브러리라고 하는 것들을 설치하다보면 지금 뭘하고 있나 하는 생각도 든다. 이
웹팩 입문
번들러이다. 웹팩을 이용하면 수백 개의 파일을 몇 개의 정적 파일, 그것도 아주 작은 용량으로 압축할 수 있다. 웹팩은 어떻게 이런 마법 같은 작업을 해낼까?파일 간에 얽혀있는 import와 export 관계를 추적해서 해낸다. 간단히 설명하자면 HTML 파일에서는
.png)
자주 사용하는 웹팩 플러그인
지난 챕터에서 웹팩 플러그인에 대해 알아보았다. 플러그인은 번들링이 끝나고 난 결과 파일에 대한 후속 처리를 해주는 기능을한다. 하지만 직접 작성할 일은 거의 없다고 했다. 자주 사용되는 플러그인을 알아보자 📌웹팩이 기본으로 제공하는 플러그인으로 결과물에 빌드 정보나
웹팩 로더란?
웹팩은 모든 파일을 모듈(module)로 바라보고 있다. 그렇기 때문에 import 구문을 통해 모든 파일들을 자바스크립트 코드안으로 가져올 수 있는 것이다. 그럼 과연 로더는 무엇일까? 1. 로더 1.1 로더의 역할 로더는 타입스크립트 같은 다른 언어를 자바스크립
프론트엔드 개발환경 웹팩(2)
📍 지난 시간에 웹팩이 등장한 배경에 대해서 간단히 알아보았다. 모듈이 등장했지만 표준모듈 시스템이 아직 모든 브라우저에서 동일하게 잘 적용되는 환경이 갖추어지지 않은 탓에 웹팩이 등장하게 되었다고 설명했다. 2. 엔트리 / 아웃풋 아래 이미지는 웹팩 공식홈페이지에
프론트엔드 개발환경 웹팩(1)
웹팩에 대해서 '공부해야지.. 포스팅해야지..' 마음 먹었었지만 그렇게 몇 달은 지났다. 이제서야 공부를 하고 포스팅하게 되었다 📌 1. 등장 배경 웹팩이 등장한 배경에 대해서 자세히 알아보자. 먼저 모듈이라는 개념에 대해 알아야 한다.
웹팩 실시간으로 확인하기
우리가 계속 페이지를 제작할 때 마다 웹팩을 실행하는 것이 약간 번거로울 때가 있다.제작중인 파일을 실시간으로 확인할 수 있는 방법을 알아보자수정된 파일 지켜보기source 내에 파일이 변경되었을때 실시간으로 자동으로 컴파일을 다시 해준다.이제 public 폴더 내에