webpack 2

Webpack 개발 환경 설정 및 주요 Plugin 사용하는 법

지난 포스팅 때 Webpack의 개념과 Loader를 사용하는 방법을 알아보았다. https://for-it-study.tistory.com/93 Webpack 개념정리 및 CSS, 이미지 모듈화 1. Webpack - Weppack은 모던 JavaScript 애플리케이션을 위한 모듈 번들러이다. * 모듈 번들러란 웹 애플리케이션을 구성하는 자원을 모두 각각의 모듈로 보고 이들을 조합해서 하나의 결과물로 만드는 for-it-study.tistory.com 위 포스팅에서는 Webpack 개발환경을 설정할 때 webpack.config.js에 있는 mode 프로퍼티를 통해 제어하는 방식으로 사용하고, 새롭게 빌드하려고 할 때마다 npm run build를 입력해 주어야 해서 불편했다. 하지만cross-env..

Webpack 개념정리 및 CSS, 이미지 로드 Loader로 사용 하는 법

1. Webpack - Weppack은 모던 JavaScript 애플리케이션을 위한 모듈 번들러이다. * 모듈 번들러란 웹 애플리케이션을 구성하는 자원을 모두 각각의 모듈로 보고 이들을 조합해서 하나의 결과물로 만드는 툴이다. - 브라우저의 성능이 높아지고 자바스크립트 애플리케이션이 점점 고도화되면서 유지보수의 난이도가 높아졌다. - 이를 해결하기 위해 자바스크립트를 기능 단위로 분리하여 사용하는 모듈화가 필요해졌다. - 자바스크립트 모듈시스템이 등장하기 전에 모듈 패턴으로 사용했고, 정식 지원하는 모듈 시스템이 생겨났지만, IE 브라우저에서는 지원하지 않았기 때문에 모든 브라우저 환경에서 모듈 시스템을 사용할 수 있도록 만들어진 게 webpack이다. Webpack 공식홈페이지: https://webp..