공부 정리 공부 정리

Bundler

• Webpack

  Bundler/Webpack 2021. 7. 5. 05:36

  프로젝트 설치 $ npm init -y $ npm i -D webpack webpack-cli webpack-dev-server@next 설치가 완료되면 package.json 내부에 생성됨 "devDependencies": { "webpack": 설치된 버전이 명시, "webpack-cli": 설치된 버전이 명시, "webpack-dev-server": 설치된 버전이 명시 } 프로젝트 실행 ## 세팅 ## package.json 내부에 "scripts" 수정 "scripts": { "dev": "webpack-dev-server --mode development", "build": "webpack --mode production" } ## 구성 설정 ## 프로젝트 루트 경로에 webpack.config..

  Read More
• Parcel

  Bundler/Parcel 2021. 7. 3. 20:00

  프로젝트 설치 $ npm init -y $ npm i -D parcel@next 설치가 완료되면 package.json 내부에 생성됨 "devDependencies": { "parcel": 설치된 버전이 명시 } 프로젝트 실행 ## 세팅 ## package.json 내부에 "scripts" 수정 "scripts": { "dev": "parcel index.html", "build": "parcel build index.html" } 프로젝트에서 터미널을 열고 npm run dev 입력 엔터로 실행 정적 파일 연결 dist 폴더로 자동으로 넣어줄 수 있는 패키지를 설치한다 (parcel-reporter-static-files-copy) ## 패키지 설치 ## $ npm install -D parcel-re..

  Read More
• Bundler

  Bundler 2021. 7. 1. 13:50

  Bundler 번들러란 웹 애플리케이션을 구성하는 자원(HTML, CSS, Javscript, Images 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구를 의미 대표적인 Bundler Parcel - 구성 없는 단순한 자동 번들링 - 소/중형 프로젝트에 적합 Webpack - 매우 꼼꼼한 구성 - 중/대형 프로젝트에 적합 Rollup 참조 https://joshua1988.github.io/webpack-guide/webpack/what-is-webpack.html#%EC%9B%B9%ED%8C%A9%EC%97%90%EC%84%9C%EC%9D%98-%EB%AA%A8%EB%93%88 웹팩이란? | 웹팩 핸드북 웹팩이란? 웹팩이란 최신 프런트엔드 프레임워크에서 가장 많이 사..

  Read More