Webpack (2018.06.23)

• module bundler
• 모든 것은 모듈이다!

entry

• 의존성 그래프의 시작
• webpack이 파일을 읽어들이기 시작하는 부분

output

• entry에서 설정한 파일을 시작으로 의존된 모든 모듈을 하나로묶는다
• bundling 결과물 처리 위치 ( path ), 파일 이름 ( filename) 설정 가능

loader

• test에 파일지정 ( 정규표현식 ), use에 사용할 loader를 지정한다
• eslint-loader / babel-loader /css-loader / style-loader
• (비)자바스크립트 파일을 웹팩이 이해하게 변경해줌
• css-loader :적용 시 CSS코드가 JS로 변경됨
• style-loader : css-loader를 통해 변경된 stylesheet를 DOM에 동적으로 추가

plugins

• loader가 파일단위로 처리한다면, plugin은 번들된 결과물을 처리한다

— UglifyJsPlugin

• loader로 처리된 js 결과물을 난독화 처리한다

— DefinePlugin

• create global constants which can be configured at compile time
• service할 URL/URI 등을 미리 설정해놓으면 매우 편함

— CleanWebpackPlugin

• build전에 결과물이 생성되는 파일을 비워줌

— HtmlWebpackPlugin

• simplifies creation of HTML files to serve your webpack bundles