웹팩

웹팩은 여러 .js, .sass, .css 파일들을 번들링 해줌으로써 웹페이지의 속도와 용량을 최적화 해주는 역할을 한다.우선 임시로 파일을 만들어보자index.htmlhello.jsworld.jsindex.js해당 디렉토리 폴더에 웹팩을 설치먼저 해당 폴더 터미널을

이전에 사용한 터미널 명령어를 다시 확인해보자위 코드는 다시 적기엔 너무 길고 귀찮다.webpack.config.js 설정파일 도입웹팩 설정 파일을 생성해보자 최종 루트 폴더에 webpack.config.js 파일을 생성한다.webpack.config.js 파일 내 아

모드 옵션을 사용시 웹팩에 내장된 최적화 된 기능을 사용할 수있다.옵션을 설명하자면 아래를 확인해 보자development : DefinePlugin의 process.env.NODE_ENV를 development로 설정한다.모듈과 청크에 유용한 이름을 사용할 수 있다.

이제 CSS를 적용할 로더를 도입해 보자최종 폴더에 style.css 파일을 생성index.html에 css 적용라이브 서버 실행 결과위 처럼 css파일 추가와 페이지 스타일이 변경된 것을 확인할 수 있다.여기서 아쉬운점은 자바스크립트 파일은 번들링 되어있지만 css파

우리는 당연히 하나의 페이지만 제작을 하지 않을 것이다.일단은 임시로 about.html 파일을 제작하고, index.html파일을 수정한다.about.htmlabout 페이지는 source폴더 내에 index_bundle.js가 아닌 about_bundle.js파일을

웹팩에는 두가지 형태의 확장 기능이 있다. 로더 : 우리가 갖고 있는 모듈을 output을 거치는 과정을 사용되는 기능 플러그인 :

우리가 계속 페이지를 제작할 때 마다 웹팩을 실행하는 것이 약간 번거로울 때가 있다.제작중인 파일을 실시간으로 확인할 수 있는 방법을 알아보자수정된 파일 지켜보기source 내에 파일이 변경되었을때 실시간으로 자동으로 컴파일을 다시 해준다.이제 public 폴더 내에