시작은 가볍게 마무리는 묵직하게

plugin의 정의 웹팩의 기본적인 동작에 추가적인 기능을 제공하는 속성이라고 할 수 있다. 웹팩에는 두가지의 확장 기능이 있다. 첫번째는 로더, 두번째는 플러그인이다. 로더는 모듈을 최종적인 아웃풋으로 만들어가는 과정에서 사용하는 것이며 플러그인은 최종적인 결과물을 변형하는 것이라고 할 수있다. plugin의 종류 1. htmlwebpackplugin이란? 웹팩으로 컴파일한 정적 파일 들(js,css, 이미지 등)을 특정 html파일에 나 태그 등을 자동으로 생성하여 해당 정적파일을 삽입하여 새로운 html파일을 특정 위치(예 : 흔히 dist폴더에 생성한다.)에 생성해주는 플러그인을 의미한다. 특정 html 파일을 js나 css, 이미지 등과 함께 웹팩으로 번들링하여 최종적으로 새롭게 완성된 html..

5.babel-loader ES6이상의 자바스크립트 코드는 인터넷 익스플로러 혹은 버전이 낮은 구버전 브라우저에서 지원하지 않는 경우가 있다. 이런 점을 착안하여 ES6이상의 문법을 ES5이하의 코드로 트랜스파일링하도록 하는 기능이 babel이며 이 babel을 웹팩으로 파일을 번들링할 때도 실행하게끔 해주는 것이 babel-loader다. 우선 npm install --save-dev babel-loader @babel/cli @babel/core @babel/preset-env 로 다운 받는다. babel-loader: 웹팩과 바벨을 연동시키도록 해준다. 아래의 것들은 플러그인이지만 babel-loader과 같이 쓰이기 때문에 간략하게 소개하면 아래와 같다. @babel/cli : 터미널에서 바벨 명..

loader란 웹팩이 웹앱을 해석할 때 해석하기 힘든 정적자원들을 처리하거나 해당 정적자원들을 유효한 모듈로 변환하여 애플리케이션에서 사용하거나 dependency graph에 추가하는 역할을 한다. 다양한 loader들은 npm을 통해 다운로드해야 사용할 수 있다. 예 : npm install --save-dev 로더명 로더를 만약 사용하지 않고 css파일을 import하는 js파일을 웹팩으로 컴파일 하면??? 에러가 뜨면서 적절한 로더를 사용하라는 에러문구가 뜨게 된다. 그러면 어떠한 loader들이 있을까? 우선 loader는 아주 다양하기 때문에 이 글에서 모든 loader를 소개하는 것은 무리가 있기 때문에 흔히 프로젝트에 적용하는 loader 중 자주 쓰일 수 있는 loader를 소개하고 설명..

entry entry란 웹팩에서 웹자원을 변환하기 위해 최초로 진입하는 곳이자 번들링하고자 하는 자바스크립트 파일 경로와 이름을 적는 곳이다. 이 속성에는 웹 애플리케이션의 전반적인 구조와 내용이 담겨져 있어야 한다. 웹팩이 해당 파일을 가지고 웹 애플리케이션에서 사용되는 모듈들의 연관 관계를 이해하고 분석하기 때문에 애플리케이션을 동작시킬 수 있는 내용들이 담겨져 있어야 한다. 그림으로 나타내면 다음과 같다. 위와 같이 모듈 간의 의존관계가 생기는 구조를 dependency graph라고 하며 코드로 나타내면 다음과 같다. // index.js import {item} from './item.js'; import {upload} from './upload.js'; import {signup} from ..

이 글은 우선 npm과 모듈이 무엇인지 그리고 바닐라 자바스크립트의 기본문법에 대해 이미 공부한 독자들에게 설명하는 느낌으로 작성한 것이다. 결코 필자가 webpack을 잘 알고 있어서 튜토리얼로 작성한 글이 아니며 어디까지나 필자가 webpack에 대해 공부한 부분을 정리하기 위해 작성한 글임을 염두해뒀으면 한다. 웹팩을 쓰는 이유가 무엇인지 나름대로 생각해보았다 1. 파일 단위로 자바스크립트 모듈 관리 가능 여기서 모듈이란 파일이나 코드를 하나의 단위로 하여 애플리케이션 하나의 구성요소를 의미한다. 이렇게 모듈로 관리하면 장점은 각 단위로 코드를 재사용할 수 있고 규모가 큰 애플리케이션을 작은 모듈들로 잘게 분리해서 관리할 수 있다. 자바스크립트는 전역 스코프로 공유하기 때문에 변수 충돌의 가능성이 ..