왕초보코딩탈출

웹팩에대하여 

향후에 웹팩 옵션 수정 할 때 다시 자세하게 알아보기하고 Webpack이 뭐하는지만 일단 알아보자

https://webpack.js.org/

사이트에 들어가보면 메인에

나 또한 웹팩설정에 대하여 아직 잘 모른다 ㅎㅎ 

위에 이미지만 딱 봤을 때 아 ~ 어떤 느낌인지 

설정도 잘은 모르겠지만 

무엇을 어떻게 묶어서 어떻게 내보내고 불러올지 설정하지 않을까... 

bundle your assets  

JS , .png ,sass , jpg 등등   웹팩으로 딱 묶는 거구나 !!!

내가 기존에 작성했던 HTML 을보면

페이지마다 스크립트 또는 CSS 다 불러와야하고 그나마 include를 써서 하긴했다만 그것도 페이지별로 다르니 

필요없는 스크립트를 브라우저에서 로딩하게되고 불필요한 자원을 낭비하게 된다.....

그래서 webpack을 사용하는 것 아닐까?

CSS는  css-loader 가 

FILE 은 file-loader 가

여기서 한가지 알아야 할 것은 

최신 브라우저는 대부분 ES6 형태를 실행 가능하지만 구버전에서는 실행할 수 없기 때문에 ES5로 변환해줘야한다.

다음과 같은 import 는 ES6문법이다.

ES6 문법으로 작성 되어진 JS 코드들을 ES5로 변경해야한다 

이것을 가능하게 해주는 것이 Babel-loader 일단 웹팩에 대해서는 이정도로 알고 나중에 설정할 때 더 알아보기로 하자

자세하게 알아보려면 사이트 들어가서 Documentation 읽어보세요 ㅎㅎ