처음 시작하기 앞서 아래와 같이 파일 구조를 만들어줍니다. index.js const hiWebpack = () => { const tag = document.createElement("h1"); tag.innerHTML = _.join(["hi", "webpack"], " "); return tag; }; document.body.appendChild(hiWebpack()); index.html 위의 코드는 lodash 라이브러리를 body 태그안에 cdn 형태로 불러온 후 index.js를 실행시켜서 body태그안에 hi webpack을 넣는 코드이다. 실행을 해보면 아래와 같이 결과가 나오며 lodash.min.js 파일이 load되는 것을 볼 수 있다. http 형태로 lodash를 요청하여 사용..

webpack이란? Webpack은 frontend, backend 구분없이 모두 사용할 수 있는 module bundler이다. webpack은 서로 연관성있는 웹 자원들(js, html, img, css)등을 묶는 작업(bundling)을 한다. 하나로 묶어서 최종적으로는 웹페이지의 성능향상 및 Web task manger(Gulp, Grunt) 역할까지 한다. * web task manger란? 유닛 테스트, 린팅(소스코드 분석하여 오류 확인), 최적화 등 웹개발에 수반되는 시간 소모적이고 반복되는 태스크들을 자동화 시키는 작업을 말한다. webpack을 사용하는 이유? web loading 속도 Up 1. 기존의 파일들의 의존성 관리 2. 요청하는 파일 줄이고 파일이 필요할 때 요청하기 js co..