당연한 개발자가 되자

❓플러그인의 역할은? 로더가 파일 단위로 처리하는 반면 플러그인은 번들된 결과물을 처리합니다. 번들된 Javascript를 난독화 한다거나 특정 텍스트를 추출하는 용도로 사용합니다. ⚒️ 커스텀 플러그인 만들기 webpack 문서의 Writing a plugin을 보면 Class로 플러그인을 정의 하도록 합니다. 문서의 예제 코드를 보고 나만의 플러그인을 만들어봅시다. // my-webpack-plugin.js class MyWebpackPlugin { apply(compiler) { compiler.hooks.done.tap('My Plugin', stats => { console.log('MyPlugin: done'); }); }; }; module.exports = MyWebpackPlugin; 로..

❓로더의 역할은? Webpack은 모든 파일을 모듈로 바라봅니다. Javascript로 만든 모듈 뿐만 아니라 StyleSheet, Image, Font까지도 전부 모듈로 보기 때문에 import 구문을 사용하면 Javascript 코드 안으로 가져올 수 있습니다. 이것이 가능한 이유는 Webpack의 로더 덕분입니다. 로더는 Typescript 같은 다른 언어를 Javascript 문법으로 변환해 주거나 이미지를 data URL 형식의 문자열로 변환합니다. 뿐만아니라 CSS 파일을 Javascript에서 직접 로딩할 수 있도록 해줍니다. 🔨 간단한 커스텀 로더 만들기 로더를 사용하기 전에 동작 원리를 이해하기 위해 로더를 직접 만들어 봅시다. my-webpack-loader.js 파일 생성 module..

❓엔트리와 아웃풋이란? Webpack은 여러개 파일을 하나의 파일로 합쳐주는 번들러(Bundler)입니다. 하나의 시작점(Entry Point)으로부터 의존적인 모듈을 전부 찾아내서 하나의 결과물로 만들어 냅니다. app.js부터 시작해 math.js 파일을 찾은 뒤에 하나의 파일로 만드는 방식입니다. 🔨 간단히 Webpack으로 번들링 작업을 해봅시다. 번들 작업을 하는 webpack 패키지와 webpack 터미넣 도구인 webpack-cli를 설치합니다. # -D 옵션은 development 패키지, 즉 개발용 패키지로 설치한다는 의미입니다. npm install -D webpack webpack-cli 설치가 완료되면 node_modules/.bin 폴더에 실행 가능한 명령어가 몇 개 생깁니다. w..

❓ Webpack은 왜 필요한가? 먼저 문법 수준에서 모듈을 지원하기 시작한 것은 ES2015부터입니다. import/export 구문이 없었던 모듈 이전 상황을 살펴보는 것이 webpack 등장 배경을 설명하는데 용이할 것 같습니다. 1️⃣ 최초로 사용한 방식 먼저 아래의 두가지 js 파일이 있다고 가정합니다. math.js // 두개의 숫자를 인자값으로 받아서 더하는 함수 function sum (a, b) { return a + b; } app.js // math.js 파일의 sum 함수를 사용하는 js 파일 console.log(sum(1, 2)); 위의 코드들은 모두 하나의 HTML 파일 안에서 로딩해야만 실행됩니다. math.js가 로딩되면 app.js는 이름 공간에서 ‘sum’을 찾은 후 이..