webpack(fin) - 웹팩 주요 속성(webpack.config.js)

장밤톨·2024년 5월 10일

웹팩 주요 속성

entry

: 웹팩에서 웹 자원을 변환하기 위해 필요한 최초 진입점이자 자바스크립트 경로

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

output

: 웹팩을 돌리고 난 결과물의 파일 경로

// webpack.config.js
module.exports = {
  output: {
    filename: 'bundle.js'
  }
}

: 최소한 filename은 지정해줘야 하며 일반적으로 path와 함께 정의한다.

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

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

filename : 웹팩으로 빌드한 파일의 이름
path : 해당 파일의 경로

output 파일 이름 옵션

결과 파일 이름에 entry 속성을 포함하는 옵션

module.exports = {
  output: {
    filename: '[name].bundle.js'
  }
};

결과 파일 이름에 웹팩 내부적으로 사용하는 모듈 ID를 포함하는 옵션

module.exports = {
  output: {
    filename: '[id].bundle.js'
  }
};

매 빌드시 마다 고유 해시 값을 붙이는 옵션

module.exports = {
  output: {
    filename: '[name].[hash].bundle.js'
  }
};

웹팩의 각 모듈 내용을 기준으로 생생된 해시 값을 붙이는 옵션

module.exports = {
  output: {
    filename: '[chunkhash].bundle.js'
  }
};

loader

: 웹팩이 웹 어플리케이션을 해석할 때 자바스크립트 파일이 아닌 웹 자원(HTML, CSS, Images, font …)들을 변환할 수 있도록 도와주는 속성

// webpack.config.js
module.exports = {
  module: {
    rules: []
  }
}

추가자료 : https://webpack.js.org/loaders/

plugins

: loader가 파일 단위로 작업을 처리하는 반면, 플러그인은 번들 최적화, 자산 관리 및 환경 변수 주입과 같은 광범위한 작업을 수행

추가 자료 : https://webpack.js.org/plugins/

4가지 주요 속성 도식

+) 추가 mode

: production, development, none

development : 개발자의 개발 효율성과 디버깅 용이성을 최대화 하기위해서 개발 시에는 이를 사용하도록 한다.
production : 애플리케이션을 최종 사용자에게 제공할 때 성능을 최적화하고 보안을 강화하기 위해서 배포 시에는 이를 사용하도록 한다.

지금까지 배운 것을 분석하고, 비교해보기 위해 내 프로젝트에서 webpack.config.js를 찾았지만 없다. 알아보니, react-create-app을 통해서 생성한 프로젝트에는 기본적으로 설정이 되어있으며, 프로젝트의 최적화를 위해서 숨겨져 있다고 한다. 만약 이를 확인하고 싶다면, npm rum eject를 하게 된다면 확인할 수 있다고 한다.

하지만, 기본적인 설정이 잘 되어있기 때문에 특별한 상황이 아니면 이를 건드릴 필요가 없다고 한다.

웹팩 데브 서버

: 빌드 대상 파일이 변경 되었을 때 매번 웹팩 명령어를 실행하지 않아도 코드만 변경하고 저장하면 웹팩으로 빌드한 후 브라우저를 새로고침 해준다. 매번 명령어를 치는 시간과 브라우저를 새로 고침하는 시간 뿐만 아니라 웹팩 빌드 시간 또한 줄여준다.

"scripts": {
	"dev": "webpack-dev-server",
	"build": "webpack"
}

: 개발시에 사용하다가, 개발이 완료되면 웹팩 명령어를 이용해 결과물을 파일로 생성해야 한다.

npm start

: 리액트(create-react-app으로 생성한)에서 개발을 하며 화면을 실시간으로 확인하고자 할 때 npm start 를 통해 서버를 열어서 확인하고, 배포 시에만 npm run build 을 사용한다. 이에 대해 확인해본 결과, 리액트에서는 웹팩 설정이 기본적으로 되어 있는데, npm start 를 통해 웹팩 데브 서버를 열 수 있도록 설정이 되었다. 이는 package.json에서 확인할 수 있다.

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

이 설정에서 "start": "react-scripts start" 부분이 npm start를 실행했을 때 개발 서버를 시작하는 명령어이다. react-scripts start는 내부적으로 Webpack 개발 서버를 구성하고 실행하여 소스 코드의 변경을 감지하고 브라우저를 자동으로 새로 고침하여 변경 사항을 반영한다.

Webpack 기반 프로젝트에서는 webpack-dev-server나 다른 개발 서버 툴을 사용할 수 있으며, 이 역시 package.json의 scripts 섹션에서 start 명령어로 설정할 수 있다. 예를 들어, Webpack을 사용하는 경우 package.json 파일은 다음과 같이 설정하면 된다.

지금까지 웹팩을 공부하며👩‍💻

리액트부터 맨땅에 헤딩을 하며 공부해왔던 나는 package.json과 빌드와 배포, 서버 열기 너무나 당연한듯 사용만 해왔던 것 같다. 우테코 프리코스 시절, package.json을 잘못건드려 프로젝트를 삭제하고 다시 시작했던 경험이 있다. '그래서 이게 뭔데?!' 부터 시작한 공부이다.
하나하나 알아가보니 모두 의미가 있었던 것들이며, eslint와 prettier를 설치하는 과정에서 package.json이 변경되어 안됐다는 것을 깨달았다. 그리고 어떤 과정으로 웹팩이 만들어졌는지 공부하며 의미를 찾아갔다. 지금까지 당연하게 생각했던 프로젝트들, 공부들 하나하나 의미를 두는 공부를 해야할 것이다.

장밤톨

짱이 되고 싶다

이전 포스트

webpack - 웹팩 튜토리얼

다음 포스트