3 분 소요

리액트 스터디4 - webpack

📌모듈이란?

  • 개발하면서 작성한 모든 파일
  • 자바스크립트에서의 모듈: 특정 기능을 가진 코드들을 하나의 파일로 관리하는 것
  • 웹팩에서의 모듈: HTML, CSS, JS, Images, Font 등 웹 애플리케이션을 구성하는 모든 자원들



📌자바스크립트 모듈 관리의 필요성

과거

  • 자바스크립트의 변수 유효 범위(스코프)는 기본적으로 전역 범위를 기본으로 가진다.
  • 모듈화 하지 않으면 어디서든 변수에 접근할 수 있고 실수로 변경할 수 있는 문제가 발생한다.

현재

  • 이러한 문제를 해결하기 위해 모듈로 관리하게 되었다.
  • CommonJS, AMD, ESModule 등의 모듈 시스템이 만들어졌다.



📌로딩 시간 줄이는 법?

브라우저 요청하는 http 개수를 줄이는 것

→ 여러 모듈 js를 bundle.js로 묶어서 배포: 번들링



📌Webpack의 등장 배경

1. 파일 단위의 자바스크립트 모듈 관리의 필요성 2. 웹 개발 작업 자동화 도구 3. 웹 애플리케이션의 빠른 로딩 속도와 높은 성능



📌Webpack: 모듈 번들러

  • 웹 애플리케이션에서 사용하는 수많은 리소스를 하나의 파일로 병합 및 압축해주는 “모듈 번들러”
  • 번들링과 컴파일을 결합하는 “정적 모듈 번들러”

※ 빌드 = 번들링 = 변환

Untitled (15)

개발자는 NPM을 사용하여 프로젝트에 필요한 Webpack 및 기타 JavaScript 라이브러리와 도구를 설치한다. 이는 일반적으로 npm install webpack 또는 npm install React와 같은 명령을 실행하여 수행된다.

Untitled (16)



📌Webpack 이용시 장단점

단점

  • 비교적 복잡한 configuration
  • 개발 모드 속도(Webpack 5에서 추가된 caching 옵션으로 해결 완)
  • Webpack의 번들 크기

장점

  • 성능 최적화 & 자동화: tree shaking과 같은 최적화 수행, http 요청 수 감소
  • Loader : HTML, CSS, JS, Images, Font 등 다양한 파일을 로드할 수 있다.
  • Plugin : 번들링 결과물에 대한 후처리 작업을 수행, 최적화 작업 등을 쉽게 할 수 있다.
  • Code Splitting : 코드를 적절히 분할하여 초기 로딩 속도를 개선, 필요한 코드만 로딩하여 UX 향상
  • 필요할 때만 필요한 스크립트 로드: Dynamic Lodaing & Lazy Loading
  • Dependency Issue 해결
  • 브라우저를 새로고침하지 않고 변경 사항을 즉시 반영(HMR)



📌Webpck 설치

npm i webpack webpack-cli webpack-dev-server -D
  • webpack : 본체
  • webpack-cli : 콘솔에서 실행하는 명령어 담고 있음



📌Config 파일들 조정

package.json 코드 수정

"scripts": {
   "build": "webpack",
   "dev": "webpack serve"
},

webpack.config.js 만들기

Untitled (17)



1. Entry

  • 웹팩을 실행할 대상 파일, 그 진입점과 경로 정의
  • 메인 JS 파일을 지정
  • 그 진입점부터 재귀적으로 빌드
  • 트리 쉐이킹 : 의존성 그래프에 포함되지 않은 코드는 빌드 제외
  • __dirname : 기본으로 제공하는 변수, root 파일 위치 알려줌

유형: single이나 array

entry: {
	bundle: patch.resolve(__dirname, 'src/index.js').
}



2. Output

  • 웹팩을 실행 후 결과물의 파일 경로
  • filename, patch 설정
  • dirname : node에서 제공하는 환경 변수, 현재 파일이 존재하는 폴더명(filename도 가능)
output: {
  path: path.resolve(__dirname, 'dist'),
  filename: '[name][contenthash].js',
  clean: true,
  assetModuleFilename: '[name][ext]',
}
output: {
  path: path.resolve(__dirname, 'dist'),
  filename: 'bundle.js',
},



3. Loader

  • 특정 파일을 해석하고 변환하는 작업 담당
  • 모든 리소스를 모듈로 취급하고 그 리소스들을 하나의 파일로 병합 및 압축할 수 있다
  • HTML, CSS, 이미지, font 같은 asset 파일들을 웹팩이 인식하고 할 수 있도록 해주는 것을 loader가 한다
  • 각 객체에는 적어도 2개의 속성을 입력한다 test : 로더를 적용할 “파일 유형”(CSS, JS 등등) use : 로더 이름
  • 다수의 로더를 적용할 때는 오른쪽에서 왼쪽 순인 관계로 “순서”에 주의해야한다

🔥 많이 쓰이는 로더

  • files
  • CSS
  • SASS
  • Babel
  • TypeScript
module: {
	rules: [
		{
			test: /\.scss$/,
			use: ['style-loader', 'css-loader', 'sass-loader'],
		},
		{
			test: /\.js$/,
			exclude: /node_modules/,
			use: {
				loader: 'babel-loader',
				options:{
					presets:['@babel/preset-env'],
				},
			},
		},
	],
}



4. Plugins

  • 웹팩 실행시 원하는 추가적인 기능을 추가할 수 있는 옵션
plugins: [
	new HtmlWebpackPlugin({
		title: 'Webpack App',
		filename: 'index.html',
		template: 'src/template.html',
	}),
	new BundleAnalyzerPlugin(),
],

🔥 자주 사용하는 플러그인



5. devServer

  • 프록시(Proxy) 등 설정
devServer: {
	static: {
    directory: path.resolve(__dirname, 'dist'),
  },
  port: 3000,
  open: true,
  hot: true,
  compress: true,
  historyApiFallback: true,
},



6. devtool

  • HMR(Hot Module Replacement): 웹팩으로 빌드한 결과물이 웹 애플리케이션에 실시간으로 반영된다
  • 소스맵: 압축하여 배포하여 디버깅이 어려운 문제를 해결한 것, 배포된 빌드 파일과 원본 파일을 연결 추적한다
devtool: 'source-map',



7. Mode

  • none
  • development : 개발 모드
  • production (default) : 배포 모드, 성능 최적화를 위해 파일 압축 등의 빌드 과정이 추가된다.
mode: 'development',

카테고리:

업데이트:

댓글남기기