Webpack

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 등을 변환할 수 있게 도와주는 속성이다
• 웹팩은 모든 파일을 모듈로 취급하여 관리하는데 사실상 자바스크립트 파일만 알고 있어 로더를 이용해 다른 파일들을 웹팩이 이해하게끔 변경해줘야 한다
• loader의 종류
  • CSS Loader
  • Babel Loader
  • Sass Loader
  • File Loader
  • Vue Loader
  • TS Loader

webpack Plugin

• 웹팩의 기본적인 동작에 추가적인 기능을 제공하는 속성이다
• HtmlWebpackPlugin : 웹팩으로 빌드한 결과물로 HTML 파일을 생성해주는 플러그인
• ProgressPlugin : 웹팩의 빌드 진행율을 표시해주는 플러그인

webpack with babel

• babel-loader와 babel-core가 필요하다
• babel-loader는 내부적으로 babel-core를 이용해서 소스코드를 변환하고 변환된 소스코드를 웹팩에 전달하는 역할을 수행한다

npm i -D babel-core babel-loader babel-preset-es2015

.babelrc

{ "presets": ["es2015"]}

webpack-dev-server

• 소스코드가 수정되면 재실행하고 자동으로 반영
• 수정한 파일만 빌드

npm i -D webpack-dev-server

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.HotModuleReplacementPlugin()
	],
	module: {  // babel 사용 설정
		rules: [{
			test: /\.js$/,
			use: 'babel-loader'
		}]
	},
	devServer: {
		hot: true,
		filename: 'bundle.js',
		compress: true,
		publicPath: '/',
		contentBase: path.resolve(__dirname, 'dist'),
		port: 3000
	},
	devtool: 'inline-source-map'
}

실행방법

npx webpack-dev-server --config ./webpack.config.js

라이브러리

• webpack : Webpack 라이브러리
• webpack-cli : Webpack을 명령어로 조작하기 위한 라이브러리
• babel-loader : Webpack에서 babel을 다루기 위한 라이브러리
• @babel/core : babel로 컴파일할 예정
• @babel/preset-env : babel로 컴파일 시 어떤 타겟으로 지정할지 설정하는 라이브러리
• @babel/preset-react : React를 babel로 컴파일하기 위한 라이브러리
• webpack-dev-server : 웹팩으로 로컬에서 개발하기 위한 테스트 서버

참고자료

• https://steemit.com/javascript/@noreco/webpack
• https://codermun-log.tistory.com/m/436