[webpack]웹팩(webpack) 설정하기(2) ✔️ 속성 entry : 진입점 (기본적으로 webpack config js 파일은 javascript 파일을 기준점으로 함) output: 반환점 (결과물을 내보내는 역할) - path : 결과물들의 저장 위치 (폴더명) (주의 : 상대경로(./dist)와 같은 경로를 입력하면 안 됩니다. 꼭 절대경로를 입력할 것.) - filename : 진입점의 파일 name과 동일하게 적어줍니다. 여기서 만든 filename은 entry의 key 값이 됩니다. (여러개 만들수도 있습니다. 동적으로 file name을 결정할 땐 [filename].js를 입력해주세요. ) clean : 이전에 만들어진 파일들 제거(단,5.20 version 이상만 사용 가능합니다. document에 여러 속성 및 version이 .. [webpack]웹팩 시작하기(1) 저번 글에 이어 웹팩 프로젝트를 설정하겠습니다. 먼저 package.json 파일을 만들어 줍니다. 문법 npm init -y webpack 준비에 필요한 패키지들을 다운받아 줍니다. (-D : 개발 영역에 다운로드 받는 의미입니다.) npm i -D webpack webpack-cli webpack-dev-server@next webpack : bundler 번들러가 동작하기 위한 핵심적인 package입니다. (webpack version4 이후는 cli도 설치해야 합니다.) webpack-cli : 터미널 부분에 입력하는 여러가지 명령들을 커맨드라인 interface라고 하는데 이것을 지원해줍니다. (이로인해 webpack-cli를 통하여 command line을 사용할 수 있게 만들어 줍니다 밑에.. [webpack]웹팩(webpack) 초기 설정 setting 이번에는 webpack 설정에 대해서 알아봅시다 👀 front-end의 필수 무기라고 할 수 있습니다. 먼저 등장 배경부터 알아보죠! | 웹팩(webpack)이 왜 생겼을까? 꼭 필요할까? - 대규모 project에서는 js 파일안에 많은양의 코드들이 존재합니다. 이 수많은 code line을 관리하려면 장난아니겠죠? 더 나아가 변수명도 만들기 힘들어집니다. 또한, 로딩하는데 속도가 파일이 크면 클 수록 장난 아니게 될겁니다. 결정적인 건, 신규 사이트들은 SPA를 활용한 방식의 사이트들이 많습니다. SPA란 하나의 html page에서 여러개(연관된)의 js 파일들을 포합하는 page입니다. 따라서 흩어져있는 js파일들을 하나의 파일로 번들링해줄뿐더러, 성능 최적화도 도와줍니다. 따라서 webpack을.. 이전 1 다음
