Webpack 초기 셋팅하기

npm 프로젝트 시작 npm init -y Webpack 관련 패키지 설치 webpack / webpack-cli / webpack-dev-server 설치 # webpack-cli 와 webpack-dev-server 의 메이저 버전을 일치시키기 위해 @next 키워드 사용 npm i -D webpack webpack-cli webpack-dev-server@next package.json 스크립트 작성 "scripts": { "dev": "webpack-dev-server --mode development" // --mode development : 개발 모드 명시 "build": "webpack --mode production" // --mode production : 제품 모드 명시 }, webp..

2022.11.18

유용한 사이트 모으는 중 ... 🐶

box-shadow 만들기 https://cssgenerator.org/box-shadow-css-generator.html Box Shadow CSS Generator A box-shadow CSS Generator tool to quickly generate box-shadow CSS declarations. cssgenerator.org gitignore 파일 만들기 https://www.toptal.com/developers/gitignore gitignore.io Create useful .gitignore files for your project www.toptal.com react beta (함수형 컴포넌트) https://beta.reactjs.org/ React Docs Beta A Ja..

2022.11.15

Parcel

번들러 typescript, scss, vue 등이 웹 브라우저에서 동작할 수 있도록 html, css, javascript로 변환해줌 실제로 변환은 외부 패키지를 이용해 수동으로 작업함 typescript, sass, postcss, @babel/core, vue-template-compiler 등 이러한 수동의 작업을 번들러에게 위임하는 것 Parcel 구성 없는 단순한 자동 번들링 소/중형 프로젝트에 적합함 Webpack 구성이 매우 꼼꼼함 중/대형 프로젝트에 적합함 npm 프로젝트 시작 npm init -y Parcel 설치 npm i -D parcel package.json "scripts": { "dev": "parcel index.html", "build": "parcel build inde..

2022.11.05