Webpack 기본 개념 정리

이번에 Webpack 관련 업무를 맡게 되어 기본적인 개념들을 정리해보았다.
기존에는 어렴풋이만 알고있었으나 이번 기회를 통해 더 명확하게 정리해보려 한다.

1. Webpack이란

Webpack이 하는 일은 간단하게 말하자면 프로젝트 내에 존재하는 여러 파일들(js, css, html 등등)을 한 개 또는 여러 js 파일로 변환시켜주는 작업을 자동적으로 진행하는 툴이다.

이러한 과정을 번들링이라 하며, Webpack처럼 이러한 역할을 수행하는 것들을 번들러 라 부른다. 최근에는 Webpack뿐만 아니라, Webpack보다 간결하고 더 빨리 번들링을 수행하는 ESBuild, Vite, Vercel에서 새로 출시한 Turbopack 등이 있어 이들의 사용도 고려해보는 것이 좋다.

2. Webpack을 사용함으로써 얻을 수 있는 것들

1. 프로젝트 내 수많은 파일들의 내용을 소수의 파일에 전부 넣어줌으로써, 브라우저가 요청하게 되는 리소스의 수가 Webpack을 적용하지 않았을 때보다 현저히 줄어들게 된다. (하지만 무조건 번들링 파일의 수를 줄이는 것은 성능상으로 좋지 않으며, 이에 대한 내용은 다음 기회에 정리해보려 한다.)
2. 번들링/실행 과정에서 여러가지 기능들을 사용할 수 있다. 대표적인 것으로는 babel 트랜스 파일러, webpack devserver, 각종 플러그인 등을 통하여 배포하려는 파일에 여러 기능을 자동으로 부여할 수 있다.
3. 각 빌드/실행 환경에 맞는 옵션을 더 용이하게 설정가능하다.(env 환경변수 등)

3. Webpack의 기본 구성요소

Webpack 사용 시, 루트경로에 webpack.config.js 파일을 생성후, 아래 요소들에 대한 설정을 해줌으로써 번들링시 수행할 구체적인 옵션들을 지정해줄 수 있다.

• entry : Webpack에서 번들링의 대상이 될 파일,
• ouptut: 번들링 결과물이 저장될 폴더의 경로
• loader : JS 이외의 자원들(CSS, 이미지, 등등 ) 을 변환시 추가
• plugin : 번들링 과정에서 특정 작업을 수행, 반영할 수 있는 요소이며, npm에 매우 다양한 플러그인이 존재하기 때문에 매우 유용한 기능중 하나이다.

기본적인 Webpack

module.exports = {
	// development, none, production이 있으며 선택시 Webpack이 그에 맞는 최적화를 사용
	mode: 'development' 
	entry: './src/index.js',//entry에는 타깃 파일의 경로지정
    output: {
   	  //이렇게 설정시, webpack.config.js와 동일경로에 dist폴더가 생성되고 그 안에 번들링 결과가 들어감 
      // __dirname: 현재 파일의 절대경로
      path: path.resolve(__dirname, 'dist'),
      filename: 'output.js',//번들링된 파일의 이름 지정
    },
    module: {
        rules:[
            {
              test: [번들링할 파일의 확장명에대한 정규식]
              use: ['style-loader', 'css-loader']//css파일 번들링
            },
            {
              test: /\.png$/, // 로더를 적용할 파일 유형 (정규식)
              use: [{ 'file-loader', // 해당 파일에 적용할 로더
                options: {
                    publicPath: '../dist'

            }
        ]
   },
	// 플러그인 추가
	plugins: [
		new HtmlWebpackPlugin(), // 웹팩으로 빌드한 결과물로 html파일을 생성
        new webpack.ProgressPlugin(), // 빌드 진행상태 관련
	}