프론트엔드 개발환경 - 웹팩 (Webpack)

WebPack

• CommonJS: 자바스크립트를 사용하는 모든 환경에서 모듈을 하는 것이 목표다. exports 키워드로 모듈을 만들고 require() 함수로 불러 들이는 방식

1. AMD(Asynchronous Module Definition)는 비동기로 로딩되는 환경에서 모듈을 사용하는 것이 목표
2. UMD(Universal Module Definition)는 AMD기반으로 CommonJS 방식까지 지원하는 통합 형태
3. ES2015에서 표준 모듈 시스템: 지금은 바벨과 웹팩을 이용해 모듈 시스템을 사용하는 것이 일반적

💡 모든 브라우져에서 모듈 시스템을 지원하지는 않는다. 인터넷 익스플로러를 포함한 몇 몇 브라우져에서는 여전히 모듈을 사용하지 못하기 때문

• webpack = 번들러
• devDependencies: 개발용 dependency

엔트리/아웃풋 → webpack.config.js

• mode: 웹팩 실행 모드는 의미 / 개발 버전인 development를 지정
• entry: 시작점 경로를 지정하는 옵션
• output: 번들링 결과물을 위치할 경로

로더

• 웹팩은 모든 파일을 모듈로 바라본다. 자바스크립트로 만든 모듈 뿐만아니라 스타일시트, 이미지, 폰트까지도 전부 모듈로 보기 때문에 import 구문을 사용하면 자바스크립트 코드 안으로 가져올수 있다.
• 로더는 타입스크립트 같은 다른 언어를 자바스크립트 문법으로 변환해 주거나 이미지를 data URL 형식의 문자열로 변환한다. 뿐만아니라 CSS 파일을 자바스크립트에서 직접 로딩할수 있도록 해준다.

1. css-loader: css 파일을 javascript로 변경해주는 로더
2. style-loader: 자바스크립트로 변경된 스타일을 동적으로 돔에 추가하는 로더
3. file-loader: 파일을 모듈 형태로 지원하고 웹팩 아웃풋에 파일을 옮겨 줌
4. url-loader: 이미지를 Base64로 인코딩하여 문자열 형태로 소스코드에 넣는 형식을 자동으로 지원해줌

webpack v5

• webpack 버전이 5로 올라가면서 부터는 [file-loader, url-loader, raw-loader]는 webpack의 기본 모듈로 채택되어 file-loader를 설정하게 되면 제대로 동작하지 않음
• module.exports.output.assetModuleFilename 만 설정하면 file-loader를 사용한 것과 동일하게 동작 됨

플러그인

1. BannerPlugin: 빌드 결과물에 banner를 추가해 준다
2. DefinePlugin: 환경 의존적인 정보를 소스가 아닌 곳에서 관리 이러한 환경 정보를 제공하기 위해 DefinePlugin을 제공
3. HtmlWebpackPlugin: HTML 파일을 후처리하는데 사용한다. 빌드 타임의 값을 넣거나 코드를 압축할 수 있음
4. CleanWebpackPlugin: 빌드 이전 결과물을 제거하는 플러그인
5. MiniCssExtractPlugin: CSS를 별도의 파일로 뽑아내는 플러그인