plugin 3

[Webpack] Webpack 플러그인(Plugin)

플러그인(Plugin) 플러그인은 로더가 할 수 없는 다르 작업을 수행할 목적으로 제공됩니다. 플러그인은 번들된 파일에 후처리 작업을 할 때 사용된다. ex. 번들된 파일 맨 위에 build 시간을 주석으로 삽입하는 작업 플러그인을 만들면 플러그인의 동작 원리를 이해하는데 도움이 됩니다. 커스텀 플러그인을 만드는 예제는 김정환 님 블로그에 자세히 나와있습니다. 플러그인 설정 방법 플러그인은 webpack.config.js 파일에 plugins 속성에 배열로 등록합니다. 예제 코드 const path = require('path'); const webpack = require('webpack'); module.exports = { mode: 'development', entry: { main: './src..

Frontend 2022.03.02

[Webpack] Webpack 이란 무엇인가?

Webpack이란 무엇인가? At its core, webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph which maps every module your project needs and generates one or more bundles. 위는 webpack 공식 문서에 나온 webpack에 대한 설명이다. webpack은 module bundler(모듈 번들러)이며 webpack은 프로젝트에 사용된 module의 의존성 그래프를 바탕으로 하나 이상의 bundle을 생성한다. '실전 ..

Programming/JS 2021.05.16

[Babel] Babel 이란 무엇인가?

Babel이란 무엇인가? Babel은 자바 스크립트 컴파일러다! 즉, Javascript 파일을 입력으로 받고 출력으로 Javascript 파일을 반환한다. Babel은 왜 필요한가? Javascript만 생각했을 때 브라우저 종류와 그것의 버전 별로 지원하는 javascript 최대 버전이 있다. 즉, 어떤 환경(브라우저 종류와 버전)에서 최신 javascript 문법을 지원하지 않는 경우가 발생한다. *IE(Internet Explore)는 자동 업데이트가 안돼서 주로 위와 같은 문제는 IE에서 발생한다고 한다. 때문에 작성된 javascript 파일을 브라우저가 이해할 수 있는 javascript 버전에 맞게 변환시킬 필요가 있고 babel을 통해 javascript 변환을 할 수 있다. 대표적으로..

Programming/JS 2021.05.14