웹팩 블로깅

GoGoDev·2022년 2월 23일

wanted webpack

Wanted_PreOnBoarding_FE

목록 보기

4/14

Webpack이란

웹펙이란 가장 대중적인 모듈 번들러입니다.

Module Bundler란

모듈 번들러란 웹 애플리케이션을 구성하는 자원(HTML,CSS,JS,Image,Font 등) 즉, 모듈들을 조합해서 병합된 하나의 결과물을 만드는 도구

Webpack이 필요한 이유

브라우저에서 JS를 실행하는 방법에는 두가지 방법이 있습니다.
1. 각 기능에 대한 script를 포함합니다 -> 많은 JS 스크립트를 로드하면서 네트워크 병목 현상이 발생
2. 큰 용량의 JS파일을 사용 -> scope, 크기, 가독성, 유지 보수 측면에서 문제를 야기한다.

Webpack 구성

Entry
Output
Loaders
Plugins
Mode
이 5가지는 웹팩의 빌드(파일 변환) 과정의 주요 속성입니다.

Entry

Entry는 웹팩에서 웹 자원을 변환하기 위해 필요한 자바스크립트 파일 경로입니다.

Entry에는 웹 애플리케이션의 구조와 내용이 담겨져야합니다.

// webpack.config.js 파일
module.exports = {
	entry: './src/index.js'
}

// index.js파일
import LoginPage from './LoginPage.js';
import MarketHomePage from './MarketHomePage.js';
import BasketPage from './BasketPage.js`;

function App() {
	LoginPage.init()
    MarketHomePage.init()
    BasketPage.init()
}

App();

로그인 화면, 마켓 홈페이지 화면, 장바구니 화면을 모두 한 파일에 모아 사용하고 있습니다.
웹팩을 실행하면 각 파일들의 구조와 내용을 분석하여 파일을 빌드합니다.

Output

output은 웹팩이 실행된 후 나온 결과물의 파일 경로입니다.

// webpack.config.js
const path = require('path');

module.exports = {
	entry: './src/index.js'
    output: {
    	path: path.resolve(__dirname, 'dist'),
    	filename: 'bundle.js,
    },
}

//page.html
<html>
  <head>...</head>
  <body>
    <script src="dist/bundle.js"></script>
  </body>
</html>

Loaders

웹팩은 기본적으로 JS와 JSON파일만 이해하지만 Loaer를 사용하면 웹팩이 다른 유형의 파일을 처리하거나 모듈로 변환하여 애플리케이션에서 사용하거나 디펜던시 그래프에 추가합니다.
ex) 로더를 사용하여 웹팩에 CSS파일을 로드하거나 TypeScript를 JavaScript로 변활할 수 있다.

// webpack.config.js
const path = require('path');

module.exports = {
	entry: './src/index.js'
    output: {
    	path: path.resolve(__dirname, 'dist'),
    	filename: 'bundle.js,
    },
    module: {
    	rules: [
          {test: /\.css$/, use:['css-loader']},
          {test: /\.ts$/, use:['ts-loader']},
        ]
    },
}

Plugins

플러그인을 활용하여 번들을 최적화하거나, asset을 관리하고 환경변수 주입등 광범위한 작업을 수행할 수 있다.

//webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin')l
const webpack = require('webpack'); 

module.exports = {
	module:{
    	rules: [
          {test: /\.css$/, use:['css-loader']},
          {test: /\.txt$/, use:['raw-loader']},
        ]
    },
  	plugins: [new htmlWebpackPlugin({template:'./src/index.html'})],
}

Mode

Mode 정의를 통해 웹팩의 실행 모드가 변경됩니다.
실행 모드 3가지
1. none: 모드 설정 X
2. development: 개발 모드 -> 웹팩 로그, 결과물 보기 좋음
3. production: 배포 모드 -> 성능 최적화를 위한 파일 압축 등의 빌드 과정 추가

module.exports = {
	mode: 'development',
 	entry: '',
  	output: {},
  	module: {},
}

심화 학습

source Map
webpack의 플러그인 인터페이스, 모듈
디펜던시 그래프

참조

https://webpack.kr/
https://joshua1988.github.io/webpack-guide/guide.html (캡틴 판교님)

GoGoDev

🐣차근차근 무럭무럭🐣

이전 포스트

번들링 블로깅

다음 포스트