로더(Loader) 웹팩은 모든 파일을 모듈로 인식(Javascript, css, image, 폰트 등) import 구문을 통해 자바스크립트 코드 안으로 가져올 수 있음 타입스크립트 같은 다른 언어를 자바스크립트 문법으로 변환해주거나 이미지를 data URL 형식의 문자열로 변환 이러한 기능이 가능한 이유는 Loader 의 역할 로더 등록 webpack.config.js module.exports = { ... // 로더는 모듈 객체에 rules 에 추가 가능 module: { rules : [ // 객체 선언 { test: /\.js$/, // 로더가 처리해야할 파일들의 패턴(정규 표현식) use: [ // 사용할 로더 명시 path.resolve('./test-loader.js') ] } ] } }..

환경 요건 웹팩으로 빌드한 자바스크립트 로딩 package.json 생성 npm init package.json - bulid script 추가 { "name": "webpack-test", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "build": "webpack" }, "author": "", "license": "ISC", "devDependencies": { "webpack": "^4.43.0", "webpack-cli": "^3.3.12" } } webpack, webpack-cli 설치 wepback : Module로 연결된 여러개의 자바스크립트 파일을 하나로 합쳐주는 역할(bundle) webpack-cli..

정의 프로그램을 구성하는 내부의 코드가 기능별로 나뉘어져 있는 형태, 어떤 기준을 통해 코드가 분리되어 있는 상황에서 서로를 참조 재사용성과 프로그램 관리 차원의 장점 Module 표준 Module 시스템이 제공되는 환경은 파일을 하나의 모듈로 인식하고 자신의 코드를 외부에서 참조할 수 있게 하거나 다른 Module 로 부터 특정 기능을 사용할 수 있게 해주는 keyword를 제공할 수 있는 환경 Module 을 사용하는 방법은 Module 이 어떤 표준을 따르냐에 따라 달라짐 Module 시스템은 여러가지 존재 CommonJS(Node.js) ESM(ECMAScript 2015 ~) 1. CommonJS(Node.js) Module Keyword: 가져오기 require (모듈의 경로) Module k..

Webpack 개념 Webpack은 프로젝트의 구조를 분석하고 자바스크립트 모듈을 비롯한 관련 리소스들을 찾은 다음 이를 브라우저에서 이용할 수 있도록 하나의 파일로 합쳐주는 모듈 번들러(Module Bundler) Module로 연결된 여러개의 자바스크립트 파일을 하나로 합쳐주는 역할(Bundle) 등장 배경 예전에는 웹페이지에서 페이지를 보여주기 위한 수많은 JS 파일을 서버로 요청 파일이 여러개로 분할 되어 있으면 변수 스코프를 생각해서 개발 필요 브라우저가 이해할 수 있는 코드로 변환 작업 필요 Webpack 의 장점 코드 합축 및 최적화 브라우저가 이해할 수 있는 코드로 변환 작업(Babel 을 통한 코드 변환 작업) 모듈 단위 개발 가능 스코프에 신경 쓰지 않고 개발 가독성과 유지 보수 효율 ..