webpack 최소설정

https://www.youtube.com/watch?v=pzHMT9Jxce0&list=WL&index=3 

 

번들링

js / image / css / ... 

하나하나의 모듈로 보고

모듈들을 배포용으로 병합하고 포장하는 작업 

 

 

번들러 - 번들링 작업을 수행하는 툴 

번들러 중 웹팩이 인기가 많다. 

 

css최적화 / 아이콘이미지 등 base64포맷으로 변환을 해준다던지 처리 가능하나 

위 영상은 간단히 사용하는 방법임. 

위의 최적화 같은 경우 plugin등이 각각 따로따로 알아서 해주는데, 버전에 따라 되던것이 안되기도 하고 nodejs의 버전에도 영향을 받는다. 

 

사실 어떻게보면 심플하게 가는게 더 유연한 변경이 되기도 한다는거. (최적화는 아니겠으나 ㅎㅎ )

 

 

https://github.com/doorahmie/webpack-js-html

위의 동영상 리포지토리를 fork 한 것이다. 

 

readme.txt 참고

npm i -D @babel/cli @babel/core @babel/preset-env babel-loader clean-webpack-plugin copy-webpack-plugin core-js cross-env html-webpack-plugin source-map-loader terser-webpack-plugin webpack webpack-cli webpack-dev-server

설치 이후

npm start 실행한다. 

그럼 

그럼 위와 같은 결과가 서빙된다. 

 

 

 

npm run build를 통해 dist 폴더가 생성된다. 최종 배포용 파일들이 생긴것이다. 운영 서버에서 서빙할 파일들이다.

설정에 따라 최적화, 압축이 된 것을 볼 수 있다.  현재 기본 세팅은 js 파일만 빌드를 하는 것이다. src 폴더 내에 개발할 파일을 넣어주면 됩니다.