Webpack

• 모던 자바스크립트 애플리케이션을 위한 정적 모듈 번들러
• html 파일에 들어가는 자바스크립트 파일들을 하나의 자바스크립트 파일로 만들어 주는 방식

Why Webpack?

1. 파일을 컴파일 할 때, 여러 모듈들의 파일을 읽어오는데 시간이 오래 걸린다. 그 부분을 해결하기 위해 여러 파일을 하나의 파일로 번들링 해준다
2. 하나의 자바스크립트 파일로 만들어서 웹페이지 성능 최적화를 해준다

Babel

• 최신 ES6버전을 구 버전인 ES5로 변환해준다

Why Babel

• 브라우저 호환성 이슈때문에

webpack.config.js

const path = require('path');
const webpack = require('webpack');

module.exports = {
	entry: path.resolve(__dirname, 'src', 'index.js'),
	output: {
		filename: 'bundle.js',
		path: path.resolve(__dirname, 'dist')
	},
	plugins: [
		new webpack.optimize.UglifyJsPlugin()  // 번들링 될 때 소스코드를 난독화 시켜서 번들링해 상용화 시 해당 플러그인을 통해서 번들링 후 배포해야한다.
	],
	module: {  // babel 사용 설정
		rules: [{
			test: /\\.js$/,  // 로더를 적용할 파일 유형(일반적으로 정규 표현식)
			use: 'babel-loader'  // 해당 파일에 적용할 로더 이름
		}]
	}
}

webpack Loader

• 웹팩이 애플리케이션을 해석할 때 자바스크립트 파일이 아닌 HTML, CSS, Images, font 등을 변환할 수 있게 도와주는 속성이다