본문 바로가기

개발/Node.js3

webpack(웹팩) 처음부터 설정하기 웹팩 기초 배우기 가장 많이 쓰이는 번들러이다. CommomJS, AMD, ES6 Module 포맷을 지원한다. 자바스크립트, CSS, Image 리소스도 관리할 수 있다.Minify, Uglify, Banner, CSS Preprocess, Code Spliting, Dynamic imports, tree shaking등 기능을 제공한다. 소스코드 https://github.com/JunH-K/webpack-example 웹팩 설치 및 실행 빈 프로젝트를 만들고 커맨드를 실행하여 설치, 실행한다. node.js 설치가 되어있어야 하며 없다면 설치한다. https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 .. 2022. 6. 27.
바닐라 자바스크립트 개발환경 구축(ES6) 설치모듈 "@babel/cli": "^7.7.5", "@babel/core": "^7.7.5", "@babel/polyfill": "^7.7.0", "@babel/preset-env": "^7.7.6", "babel-loader": "^8.0.6", "webpack": "^4.41.2", "webpack-cli": "^3.3.10", "webpack-dev-server": "^3.9.0" 목표 ES6 코드 작성→babel, webpack→ 한개 js babel 최신 js 코드→es5코드 변환 Node.js 설치 패키지 초기화 npm i init babel 설치 npm i -dev @babel/core @babel/preset-env @babel/core @babel/cli .babelrc 설정 { "pr.. 2022. 6. 24.
프론트엔드 번들러란 ? 자바스크립트 파일을 기능 단위로 모듈화하고 하나로 묶어 관리할 수 있는 방법이다. 번들러를 사용하면 소스코드를 모듈별로 작성가능하고 모듈, 라이브러리의 의존성을 관리 할 수 있다. 번들러 중 webpack 을 이용하여 번들링 할 수 있다. 자바스크립트 코드는 파일별로 작성하고 사용할 수 있으나 태그로 각 파일을 가져오면 결국 하나의 파일처럼 작동되어 가져오는 순서 및 의존성관리에 신경을 써야한다. 이런 문제를 해결하기 위해 모듈단위 개발 방식이 등장하였으나 브라우저에서는 스코프를 공유하기 때문에 직접 신경을 써야한다. 그러다 번들러가 등장하면서 이런 문제를 해결하고 있다. 번들러는 의존성있는 모듈코드를 하나 또는 여러개로 만들어주는 도구이다. 크롬에서는 ES6 Module을 지원하나 다른곳에선 바로 실행.. 2022. 6. 24.
반응형

티스토리툴바