WebPack 5 핵심 개념

• Entry
• Output
• Loaders
• Plugins
• Mode
• Browser Compatibility

Entry: webpack이 내부의 디펜던시 그래프를 생성하기 위해 사용해야 하는 모듈. 기본값은 ./src/index.js/

 

Output: 생성된 번들을 내보낼 위치와 이 파일의 이름을 지정하는 방법을 webpack에 알려주는 역할

 

Loaders: webpack은 기본적으로 JS와 JSON만 이해. 로더를 사용하면 webpack이 다른 유형의 파일을 처리하거나, 그들을 유효한 모듈로 변환 하여 애플리케이션에서 사용하거나 디펜던시 그래프에 추가. (import foo.svg)

 

Plugins: 플러그인을 활용하여 번들을 최적화하거나, 애셋을 관리하고, 또 환경 변수 주입등과 같은 광범위한 작업을 수행. 

1. HtmlWebpackPlugin: 생성된 모든 번들을 자동으로 삽입하여 애플리케이션용 HTML 파일을 생성
2. ModuleScopePlugin: Prevents users from importing files from outside of src/ (or node_modules/).

Mode: mode 파라미터를 development, production 또는 none으로 설정하면 webpack에 내장된 환경별 최적화를 활성화. 기본값은 production.