서랍장

일단 로더에 관한 개념을 알아보자. css라는 파일을 만들어보자. css 파일을 만들어 link 하기 위해서 css 파일 부터 만들어야 하고, 그 후 link 태그를 추가해 외부 스타일시트를 가져오도록 하는 것이 일반적이다. 하지만 이렇게 되면 css 파일 하나당 또 한번의 connection 을 해야 하게 되어 기존의 js 를 묶어 한번에 처리했던 의미가 퇴색되게 된다. 이를 또 webpack이 해결해준다. 다시 한번 위 그림을 보자.webpack 이 무엇인가를 바로 알 수 있게 해주는 그림이다. 저기 보면 sass 나 css, png 조차도 번들링해주는 것도 알 수 있다. 이 역할을 해주는 애가 바로 로더이다. 미리 말하겠지만 사회나가서 webpack을 얼마나 잘 알고있냐를 판가름하는 것이 이 "로더..

webpack에는 2가지의 확장 기능이 있다. 첫번째는 앞에서 배웠던 로더이고, 두번째는 플러그인이다. 로더는 우리가 가지고 있는 모듈을 최종적인 아웃풋으로 만들어가는 과정에서 사용되는 것이고, 플러그인은 그렇게 해서 만들어진 최종적인 결과물을 변형하는 것이라고 생각하면 된다. 플러그인이 더 복합적이고 자유로운 일들을 할 수 있도록 해준다는 것을 알고 있자. 플러그인은 플러그인마다 사용방법이 제각각 다르다. 때문에 다 배울필요는 없고 하나정도만 사용해보고 그 방법만 숙지하자. webpack document에 들어가서 플러그인 탭에 들어가면 여러가지 플러그인들이 있는 것을 볼 수 있다. 그 중에서 HtmlWebpackPlugin 을 살펴보자. 코딩 과정에서 html 파일을 자동으로 생성하고 싶거나 temp..

npx webpack 을 계속해서 실행하기 귀찮은 경우가 있을 것이다. 이 경우 다음과 같은 명령어를 사용해보자. npx webpack —watch 이 명령어를 치게 되면 파일을 변경하게 되면 webpack 이 자동으로 탐지하고 번들링을 해주게 된다. NPM 패키지 사용 npm을 통해서 설치한 여러가지 작은 부품이될 프로그램들을 애플리케이션으로 가져오는 방법으로써 webpack을 사용하는 방법을 알아보자. lodash 라는 유명한 라이브러리로 알아보자. npm install lodash 를 입력하게 되면 해당 라이브러리가 npm 패키지 도구에 의해 다운로드 된다. 그러면 이 라이브러리를 어떻게 webpack 에 삽입할까 다운 받은 후 js 파일을 다음과 같이 바꿔줄 수 있다. import hello_wo..

💡INPUT → PROCESS → OUTPUT이 3가지에 거의 모든 개념이 들어가있다는 '생코'의 명언 저 위 순서에 따라 어떻게 다양한 형태의 자원들을 webpack 에게 던져줄 것인가? 또한 어떤 방법으로 가공할 것인가? 를 알아보는 게 중요하고, 또한 어떻게 유리한 형태로 내보낼 것인가? 를 알아보는 게 중요하다. 이 흐름을 컨트롤하기 위해서는 webpack 에게 어떻게 해라 시키는 방법이 있는데 이 방법에 대해서 알아보자. npx webpack —entry ./src/index.js —output ./public/index_bundle.js위의 명령어는 webpack 에게 entry 파일과 output을 선언하는 명령어였다. 그러나 프로젝트가 커질수록 이 명령어를 일일이 사용하기 번거롭기 때문에 ..

Webpack 을 도입했을 때의 효과는 리팩토링이다. 리팩토링이란 구동되는 방법을 그대로 유지하면서 내부의 코드를 더 효율적으로 바꾸는 행위를 이야기한다. 코드의 전체적인 모습을 그대로 유지하면서 구형 브라우저에서 돌릴 수 있으며 여러가지 파일을 하나로 번들링하는 것을 Webpack 을 통해 해보자. 일단 nodejs 서버 프레임웤으로 해당 페이지를 올려보자.npm init 을 입력해 해당 프로젝트 폴더를 nodejs 초기 설정을 해주고, npm install -D webpack webpack-cli 저 -D 는 개발을하기 위한 옵션이다. 이렇게 2개를 다운받은 후에 src/index.js 파일을 만들어 html 에서 import 했던 구문들을 옮겨주자 // src/index.js import hello..

Javascript 를 더 잘 다루기 위한 기술이다. 이 그림은 웹팩이 무엇임을 잘 보여주는 그림이다. 웹사이트를 만들다 보면 js, css, 등등 여러 수많은 파일들이 생겨난다. 때문에 웹을 로딩해보면 정말많은 파일들이 로딩되는 것을 볼 수 있다. 이는 서버와의 통신이 그만큼 늘어나 좋지 않은 결과가 생기며 서로 독립적인 js 파일이 동일한 의미의 식별자를 사용하게 되어 원치 않은 결과가 생기기도 한다. 이를 위해 등장한 도구를 Bundler 라고 한다. 묶는 다는 뜻의 도구이다. Webpack, Broserify, Parcel 등등 여러가지 종류가 잇는데 이 중 가장 인기있는 도구인 Webpack 에 대해 알아보자. 이 번들러를 이용해 웹 개발하며 다양한 확장 파일들과 이것들을 쉽게 관리할 수 있게 ..