코딩 일기장

asset modules 는 로더를 추가로 구성하지 않아도 asset 파일 (폰트, 아이콘 등)을 사용할 수 있도록 해주는 모듈 webpack 5 이전에는 raw-loader : 파일을 문자열로 가져올 때 url-loader : 파일을 data URI 형식으로 번들에 인라인 추가할 때 file-loader : 파일을 출력 디렉터리로 내보낼 때 로더를 사용하는 것이 일반적이었다. webpack 5에서는 이러한 로더를 대체하기 위해 asset module에 4개의 새로운 모듈 유형이 추가되었다. asset/resource : 별도의 파일을 내보내고 URL을 추출 (file-loader 대체) asset/inline : asset의 data URI를 내보낸다. (url-loader 대체) asset/sourc..

file-loader css 뿐만아니라 소스코드에 사용하는 모든 파일을 모듈로 사용하게끔 할 수 있다. 파일을 모듈 형태로 지원하고 웹팩 아웃풋에 파일을 옮겨주는 것이 file-loader가 하는 일이다. src 경로에 bg.png파일을 추가하고 main.css에 body 부분을 다음과 같이 수정하고 빌드하면 body { background-image: url('./bg.png') } 전과 같이 module 에러가 뜨는 것을 확인할 수 있다. .png파일을 모듈로 인식하지 못하기 때문인데 file-loader를 install 하여 webpack.config.js에 추가해 보자 npm i file-loader webpack.config.js rules: [ ..., { test: /\.css$/, use:..

로더의 역할 웹팩은 모든 파일을 모듈로 바라본다. js 뿐만아니라 css, image, font까지 모듈로 보기 때문에 import 구문을 사용하여 js 코드 안으로 가져올수 있다. 이것은 웹팩의 로더 덕분인데 로더는 타입스크립트 같은 다른 언어를 자바스크립트 문법으로 변환해주거나 이미지를 URL 형식의 문자열로 변환한다. 또한 css 파일을 자바스크립트에서 직접 로딩할 수 있도록 해준다. 로더는 각 파일을 처리하기 위한 역할, 처리할 파일의 패턴을 명시하고 패턴에 걸리는 파일들은 use에 설정한 로더 함수가 돌도록 한다. ex) webpack.config.js const path = require('path'); module.exports = { ... module: { rules: [ { test: ..

배경 문법 수준에서 모듈을 지원하기 시작한 것은 ES2015부터이다. import/export 구문이 없었던 모듈 이전 상황을 살펴보는 것이 웹팩 등장 배경을 설명하는데 수월할 것이다. ex) math.js function sum(a, b) { return a + b; } //전역 공간에 sum이 노출 app.js sum(1, 2); 위 코드는 모두 하나의 HTML 파일 안에서 로딩해야만 실행된다. math.js가 로딩되면 app.js는 이를 공간에서 sum을 찾은 뒤 이 함수를 실행한다. 문제는 sum이 전역 공간에 노출된다는 것. 다른 파일에서도 sum이란 이름을 사용한다면 충돌한다. IIFE 방식의 모듈 IIFE(Immediately Invoked Function Expression, 즉시 실행 함..

프론트엔드 개발에 Node.js가 필요한 이유 최신 스펙으로 개발할 수 있다. js 스펙의 빠른 발전에 비해 브라우저의 지원 속도는 항상 뒤쳐진다. 아무리 편리한 스펙이 나오더라도 이것을 구현해 주는 징검다리 역할, 바벨과 같은 도구의 도움 없이는 부족하다. 웹팩, NPM 같은 노드 기술로 만들어진 환경에서 사용할 때 비로소 자동화된 프론트엔드 개발환경을 갖출 수 있다. Typescript, SASS 같은 고수준 프로그래밍 언어를 사용하려면 전용 트랜스파일러가 필요. Node.js 환경이 뒷받침 되어야 프론트엔드 개발환경을 만들 수 있다. 빌드 자동화 코딩 결과물을 브라우저에 바로 올리는 경우는 흔치 않다. 파일을 압축하고, 코드 난독화하고, 폴리필을 추가하는 등 개발 이외의 작업을 거친후 배포한다. N..