[Webpack] Webpack 시작하기

isTuna·2021년 4월 18일
1

Webpack

목록 보기
1/1

Webpack이란?

Webpack은 여러 종류의 번들러 중 하나입니다. 번들러는 웹 애플리케이션을 구성하는 HTML CSS Javascript Image 파일들을 조합해서 병합해 하나로 만드는 도구입니다.

번들러가 등장하기 이전에는 여러 개로 나누어져있는 파일들은 아래와 같은 문제를 발생시켰습니다.

  • 여러개의 파일로 분리되어있으면 유지보수는 편하지만 용량이 커져 사용자의 요청에 대한 응답이 느려집니다.
  • 대규모 웹 애플리케이션에는 수 백에서 수 천개의 javascript 파일이 존재합니다. 여러 사람들이 함께 개발하는 프로젝트에서 중복된 변수명이 존재할 경우 에러가 발생합니다.

위와 같은 이유로 등장한 번들러로는 Webpack, browserifiy, parcel이 존재합니다.

Webpack 설치하기

저는 NodeJS 프로젝트에 적용하기 위해 Webpack을 공부하기 시작했습니다. 설치 과정과 기본적인 옵션들을 설명해보려 합니다.

Webpack을 사용하기 위해서 webpack, webpack-cli 2개의 패키지를 설치하면 됩니다. webpack-cli는 개발자 편의를 위한 webpack 관련 명령어들이 들어있다고 합니다.

npm i webpack webpack-cli

webpack.configure.js

Webpack을 커스텀해서 사용하기 위해서는 webpack.configure.js와 그 안의 명령어들을 알아야합니다.

먼저 webpack.configure.js에는 번들 파일을 자동으로 생성해주는 작업을 위한 설정이 들어있습니다.


// webpack.configure.js
module.exports = {
 	entry: "./source/index.js",
  	output: {
   		path: path.resolve(__dirname,"public"),
   		filename: "index_bundle.js"
   	}
}

위와 같은 형식의 webpack.configure.js에는 entry output path filename 등의 정보가 있습니다.

entry
번들할 파일의 경로 정보

output
번들이 완료된 파일이 생성될 위치 및 파일명

loader
HTML파일 외에도 CSS, Image를 번들하기 위해서 loader를 설정해야합니다.

module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],

plugin
플러그인을 등록하기 위해 사용
ex) webpack 실행마다 기존의 빌드 제거를 위한 clean-webpack-plugin


profile
청소연구소 개발자 (2021. 05~ )

0개의 댓글