Webpack 설치 0. package.json 초기화 1 npm init -y Webpack 인터페이스는 webpack CLI와 webpack-dev-server로 총 2가지가 있다. 인터페이스 별로 Webpack 설치가 다르다. Webpack 설치에 앞서 Node JS 설치가 필요하다. 1-1. Webpack CLI 설치 webpack.config.js 설정 파일과 CLI를 이용해서 옵션을 가지고 온 후에 webpack에 제공한다. 전역에서 Webpack 사용하고 싶을 때, 첫번째 방법(node 1 install -g webpack 두번째 방법 package.json의 scripts에 추가한다. 이후에 npm run build를 하면 webpack 작업을 할 수 있다. 1 2 3 4 5 6 { "sc..

Webpack 등장배경 웹 서비스 개발에서 JavaScript로 작성하는 코드의 양도 늘어나고 있는데, 많은 Javascript 파일을 하나의 파일로 관리하기엔 어렵다. 다음과 같은 문제점이 발생한다. 높은 네트워크 비용 + 네트워크 병목현상으로 느린 속도; 브라우저에서 여러 개 파일을 로딩하는 비용이 크다. 변수 충돌 위험성; 여러 개 파일을 로딩했을 때, 각 파일은 서로의 스코프를 침범할 수 있다. 코드의 유지와 보수가 쉽도록 코드를 모듈로 나누어 관리할 수 있는 시스템이 필요해진다. JavaScript는 언어 자체가 지원하는 모듈 시스템이 없다. IIFE(즉시호출함수)를 사용하여 파일별로 Javascript 모듈화를 명세할 수 있다. CommonJS AMD(Asynchronous Module Def..