handlebars (html components) Terminal webpack.config.js html 파일을 handlebars 파일로 변경, 공통파일을 따로 분리 index2.handlebars

ES6 자바스크립트 - 모듈관리 - 의존성관리 - 전역변수 사용X " A 개발자와 B 개발자가 있습니다. 각 개발자는 자신이 개발하는 js에서 전역변수를 사용하였습니다. 두 개발자 모두 이름을 콘솔에 출력하고 싶습니다." 기존의 자바스크립트에서는 동일한 전역변수를 사용할 경우 예측하지 못한 오류를 발생합니다. -> B 개발자의 변수가 A 개발자의 변수를 덮어씌었습니다. 결과는 B.js - foo1 A.js - hellofoo1 ES6를 사용하여 위의 문제를 해결합니다. -> 각자 정의한 변수로 출력됩니다. 또한 B 개발자는 sayHello 함수에 접근은 가능하지만 name을 출력하는 부분에서 undefined 가 출력됩니다. 이것으로 A의 name과 B의 name은 완전히 독립적인 것을 확인할 수 있습니..

webpack entry, plugins 모듈화 webpack.config.js 파일을 보면 index, login 등을 각각 설정해 주는 것을 확인할 수 있습니다. 그럼 새로운 파일 작업시 이 부분을 작업할때마다 추가해야 할까요? 아닙니다. fs를 이용하여 파일의 이름을 확인하여 한번에 처리하겠습니다. template 파일명을 가져와 css/js 파일명과 매칭시킨 후 webpack 빌드시 적용될 수 있도록 처리합니다. 작업내용은 webpack.config.js 파일에서 확인가능합니다. Git https://github.com/imse0109/fetest/commit/ff8797dcee9e064c1cc6414f040afcdb133824d2

2.5 - Plugin 관리 사용할 플러그인을 설치합니다. 플러그인을 하나의 vendor파일에서 관리합니다. Terminal 작업결과는 localhost에서 확인부탁드립니다. Git https://github.com/imse0109/fetest/commit/627a24ed024ce1ce67dab763a43901b433144fbf

Babel 2.4 - ES6 -> ES5 ES6 문법은 최신브라우저가 아닌 경우에는 해석을 못합니다. ES6를 ES5로 변경해줌으로써 우리가 사용하는 많은 브라우저에서 문제없는 작업환경을 만들 수 있습니다. Terminal webpack.config.js 기존 ES6 결과 ES5 로 변경 후 결과 Git https://github.com/imse0109/fetest/commit/71f3840f1b464eb1fdb2058d5fa02da9063a3f41 4.1 webpack dev-server 사용 npm run dev-server 로 실행합니다. localhost 작업환경을 만들고 새로고침을 적용하지 않아도 반영됩니다. 빠른 개발환경을 만들 수 있습니다. Terminal webpack.config.js p..

Std. 2에서 webpack의 설치와 기본동작에 대해 확인했습니다. Std. 3부터 webpack에 대해 자세히 확인하겠습니다. *** WEBPACK *** 모듈번들링도구 아래와 같은 역할들을 수행합니다. css 1.1 - 하나의 파일로 Export 1.2 - 압축 1.3 - 사용하지 않는 css 제외 ??? js 2.1 - 하나의 파일로 Export 2.2 - 압축 2.3 - 암호화 2.4 - ES6 -> ES5 2.5 - Plugin 관리 3.1 dev, real 버전관리 4.1 webpack dev-server 사용 위의 내용을 하나씩 추가해보겠습니다. 1.1 css Export JS 와 동일하게 entry 파일이 필요합니다. entry 파일이 있으면 output 파일이 있어야 됩니다. 이때 Ex..