[Webpack] - 프로젝트 생성

Yejin Yang·2022년 5월 7일

[Bundler]

목록 보기

7/11

Webpack

자바스크립트 기반의 모듈 번들러이다. 웹 어플리케이션 개발에 필요한 다양한 요소(HTML, CSS, Javascript, Images, Font, 친구 등...)들을 하나의 파일로(혹은 여러 개의 파일로) 병합 및 압축을 해주는 역할을 한다.

패키지 설치

$ npm init -y // package.json 생성
$ npm i -D webpack webpack-cli webpack-dev-server@next

webpack: bundler가 동작하기 위한 핵심적인 패키지
webpack-cli: CLI, 커맨드 라인 인터페이스를 지원하는 패키지
webpack-dev-server: dev 명령을 통해 개발 서버를 오픈할 때 개발에 특화되어서 페이지를 새로고침해줄 수 있는 구조로 만들기 위한 패키지

package.json 파일

  "scripts": {
    "dev": "webpack-dev-server --mode development",
    "build": "webpack --mode production"
  },

webpack-dev-server --mode development: 개발 모드
webpack --mode production: 제품 모드

구성 파일 설정(webpack.config.js)

개발 서버를 오픈하려면 구성 파일을 제공 해줘야 한다.
webpack.config.js 파일을 생성하여 구성 옵션들을 직접 작성해주면 된다.
parcel은 구성 옵션이 자동화 처리 되지만 webpack은 직접 작성해야해서 단점이라면 단점이지만 이러한 구성 옵션을 통해 프로젝트를 세세하게 다룰 수 있다.
그렇기 때문에 webpack은 작은 규모의 프로젝트보다는 큰 프로젝트에서 유용하다.

export (entry & output)

브라우저에서는 import, export와 같이 데이터 가져오기와 내보내기가 사용된다. 그러나 webpack.config.js 파일은 브라우저가 아닌 node.js 환경에서 동작하므로 다른 명령어가 사용 된다.

// import
// nodeJS 환경에서 언제든지 가져와서 사용할 수 있는 path라는 전역 모듈
const path = require('path');

// export
module.exports = {
  // 파일을 읽어들이기 시작하는 진입점 설정
  entry: './js/main.js',

  // 결과물(번들)을 반환하는 설정
  output: {
    path: path.resolve(__dirname, 'dist'), // __dirname 경로와, dist 폴더를 합쳐서 절대적 경로를 path에 제공
    filename: 'main.js',
    clean: true, // 기존에 만든 내용 제거
  },
};