[JS] webpack(웹팩)이란? 그리고 webpack 심플한 가이드

webpack이란?

웹의 세계는 점점 복잡해지고 있습니다.

단순하게 생각한다면 클라이언트가 request를 하고 서버에서 response를 하지만

이 내부에서는 점점 의존성 있는 패키지들의 사용과 다양한 프로그래밍 언어들이 버전별로 달라지며 점점 복잡해지고 있습니다.

(언어들이 버전별로 달라진다면 브라우저에서도 인식을 못하는 문제가 생길 수도 있습니다.)

점점 복잡해지는 내부를 브라우저에 올리기 위한 중간에서 정리를 해야 할 모듈 번들러가 필요 했던 것입니다.

webpack은 모던 자바스크립트 app을 위한 모듈 번들러입니다.

쉽게 표현하면 js파일을 하나의 모듈로, image 파일이면 image의 모듈로 또는 각각의 css/scss를 모듈로 변경해주는 모듈 번들러인 것입니다.

웹팩을 사용하기 위한 기본 요소

Entry

– 각각의 모듈로 만들기 위한 시작점을 지정한다. 이 지점부터 소스들을 변경시킨다.

Output

– 번들로 만들고 난 이후에 결과가 저장이 되는 위치를 지정한다.

Loaders

– 웹팩은 자바스크립트 언어만 이해한다. 하지만 웹팩은 image, css 파일 등 많은 종류의 파일들을 변경하는데 이에 대한 각각의 파일들에 대한 로더가 필요 한 것이다. 번들로 묶을 파일의 종류는 config파일에서 명시한다.

Plugins

– 위의 로더에서 각각의 파일들을 묶어 모듈로 만들고 후에 전체의 대해서 변경을 할 때는 플러그인을 사용한다. 예를 들면 최신의 자바스크립트에서 이전의 자바스크립로 변경하기 위해서 UglifyJsPlugin 플러그인을 붙여 전체의 대해서 변경한다.

Entry는 여러개를 갖을 수 있지만 Ouput은 하나만 갖을 수 있습니다.

설정 파일(webpack.config.js)중 일부

entry: "./index.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: 'bundle.js'
},
mode: "development",
module: {
rules: [
{
test: /\.js$/,
loader: "babel-loader",
        options: {
presets: ["@babel/preset-env"]
}
    }
]
},

위의 코드는 webpack을 사용하기 위한 설정 파일(webpack.config.js)중 일부입니다.

entry를 지정하고 결과를 저장하는 output위치를 지정합니다.

그리고 js파일인 경우는 바벨 로더를 이용하여 모듈로 만들어줍니다.

이렇게만 보면 엄청 심플합니다.

이상 webpack을 사용하기 위한 기본적인 내용이었으며 yarn / webpack / babel 버전별로 설치 방법과 이에 따른 config파일에 명시해야 될 내용들이 조금씩 달라집니다.

(웹이 이렇게 빠르게 변하는 모습을 보고 있습니다.)

이걸 왜 알아야 하는지 처음에는 몰랐으나 React를 공부하다 보니 eject 후에 customizing을 할려고 하니 꼭 필요한 내용이었습니다.

처음 접한다면 내용이 어려울 수 있으나 익숙해지도록 해야겠습니다.