[webpack] webpack 4 사용하기
webpack v4와 ES6 이상의 자바스크립트를 사용하기 위한 babel loader, css를 모듈화 하기 위한 css loader와 style loader를 사용하는 방법을 이야기 하려고 합니다. (webpack의 기본 개념을 이해하면 이번 포스트를 이해하는데 도움이 될 것 같습니다. 이곳에서 webpack의 기본 개념을 읽어주세요.) 1. Package 설치하기 webpack + babel + css 를 사용하기 위해서, webpack과 loader 등의 package들을 설치해야 합니다. npm init -ypackage.json의 뼈대를 생성합니다. npm init -y로 package.json을 생성합니다. 1) webpack 설치하기 webpack을 설치합니다. npm install web..
[webpack] webpack 개념
Vue.JS와 Electron.JS, React.JS 등.. 자바스크립트 프론트엔드 어플리케이션을 CLI를 사용하여 프로젝트를 생성하면 자연스럽게 따라 설치되는 모듈 번들러(module bundler)였습니다. (모듈 번들러를 선택 할 수 있다면 webpack를 선택해서 사용했습니다.) 이번 포스트에서는 자연스럽게 사용했던 webpack이라는 모듈 번들러에 대해 이야기하려고 합니다. 1. 모듈 번들러가 무엇인가요? 모듈 번들러를 간단히 이야기 하면, 여러개의 파일을 하나의 파일로 묶어주는 라이브러리를 이야기 합니다. 위의 그림은 webpack의 공식문서의 첫 페이지에 등장하는 그림입니다. 위의 그림을 보면 모듈 번들러가 무엇인지가 대략 파악이 가능합니다. 모듈 번들러는 파일의 종속성을 스스로 파악하여, ..