Webpack
은 여러 종류의 번들러 중 하나입니다. 번들러
는 웹 애플리케이션을 구성하는 HTML
CSS
Javascript
Image
파일들을 조합해서 병합해 하나로 만드는 도구입니다.
번들러
가 등장하기 이전에는 여러 개로 나누어져있는 파일들은 아래와 같은 문제를 발생시켰습니다.
- 여러개의 파일로 분리되어있으면 유지보수는 편하지만 용량이 커져 사용자의 요청에 대한 응답이 느려집니다.
- 대규모 웹 애플리케이션에는 수 백에서 수 천개의
javascript
파일이 존재합니다. 여러 사람들이 함께 개발하는 프로젝트에서 중복된 변수명이 존재할 경우 에러가 발생합니다.
위와 같은 이유로 등장한 번들러
로는 Webpack
, browserifiy
, parcel
이 존재합니다.
저는 NodeJS
프로젝트에 적용하기 위해 Webpack
을 공부하기 시작했습니다. 설치 과정과 기본적인 옵션들을 설명해보려 합니다.
Webpack
을 사용하기 위해서 webpack, webpack-cli 2개의 패키지를 설치하면 됩니다. webpack-cli는 개발자 편의를 위한 webpack
관련 명령어들이 들어있다고 합니다.
npm i webpack webpack-cli
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