🖱️ 프론트엔드/기타 (3) 썸네일형 리스트형 WebPack5 #3 - 파일 로딩 안녕하십니까.노래듣다가 과몰입한 하프 입니다. 🎶 이번에는 번들링을 할 때 파일로딩을 어떻게 하면 좋을지를 알아보도록 하겠습니다. 📝 목차 Module Loading기본 설정폴더 구조를 다음과 같이 설정합니다. 📁 webpack-demo |- 📜 package.json |- 📜 package-lock.json |- 📁 dist |- 📜 index.html |- 📁 src |- 📜 index.js (수정) |- 📜 style.css (추가) |- 📜 image.jpg (추가) |- 📜 Pretendard.ttf (추가) |- 📜 webpack.config.js 기본 설정을 위해, 이미지와 폰트를 먼저 다운 받고, 다음 경로로.. WebPack5 #2 - 번들링 셋팅 안녕하세요.도서관 갔다가 휴관으로 집으로 다시 돌아온 하프입니다. 🥹 이번에는 번들링을 하기 위한 초기 셋팅을 해보려고 합니다. 프로젝트 셋팅라이브러리 설치cmd 터미널에서 진행해주시면 됩니다.mkdir webpack-democd webpack-demonpm init -ynpm install webpack webpack-cli --save-devnpm install --save lodash VSCode 플로그인 설정번들링 된것을 실행하기 위해서는 VSCode에서 Live Server라는 플로그인이 필요합니다. 설치하게 되면 오른쪽 하단에 Go Live 라고 하나가 생깁니다. 이 버튼을 누르게 되면, 현재 경로에 서버가 켜진다고 보시면 됩니다. 폴더 구조 생성다음과 같이 프로젝트를 셋팅해줍니다. .. WebPack5 #1 - 핵심 내용 안녕하세요.비트코인 하다가 나락간 하프입니다. 😂 이번에 알아볼것은 웹팩 입니다.제가 참조했던 자료는 webpack 사이트 입니다.한국어로 번역이 되어있고 가이드도 친절하니 한번 해보시면 좋을 듯 합니다. 📝 목차 웹팩이란?웹팩은 오픈 소스 자바스크립트 모듈 번들러로써 여러개로 나누어져 있는 파일들을 하나의 자바스크립트 코드로 압축하고 최적화하는 라이브러리 입니다. webpack 버전 4.0.0 이후로는 프로젝트를 번들링하기 위한 설정 파일을 필요로 하지 않습니다. 하지만 사용자 요구에 따라 기대 이상으로 유연하게 설정이 가능 합니다. 웹팩의 장점1. 여러 파일의 자바스크립트 코드를 압축하여 최적화 할 수 있기 때문에 로딩에 대한 네트워크 비용을 줄일 수 있습니다.2. 모듈 단위로 개발이 가능하며.. 이전 1 다음
