[etc] Webpack 시작하기

안녕하세요, 늘 부족하지만 아는 것을 공유하는 AlbertKo입니다!

오늘은 웹팩을 셋업하는 방법에 대해서 다뤄볼까합니다.

웹팩 공식 홈페이지

제 글 제외 좀 더 자세한 내용은 웹팩 공식 홈페이지에서 확인해주세요!

2018/07/03 - [Programming/React] - Typescript를 사용하여 React 시작하기 - Setting 및 알고 넘어가기

제가 작성한 글인데 웹팩에 대한 설명이 포함되어 있으니 한 번 확인해보세요 ^^

Webpack 설치하기

웹팩 설치하는 방법은 로컬도 두가지 방법이있어요!

프로젝트 내에 설치와 글로벌로 설치하는 방법 두가지가 있는데 저는 후자로 진행하도록 하겠습니다.

npm i -g webpack webpack-cli

이렇게 하면 글로벌로 웹팩의 설치가 끝나요.

Webpack 셋업하기

지옥같은 셋업의 시작입니다 ㅜㅜㅜ

(그)Root 디렉토리에 webpack.config.js 파일을 만들어줍시다.

touch webpack.config.js

그 후 module.export 로 감싸줍시다.

Tip )

ES Module 은

export Name

으로 해결 되지만, commonjs는 

module.exports = Name

라는 점

module.exports = {

}

Entry

Entry option은 말 그대로 시작점을 뜻합니다.

저는 root 디렉토리에 index.js로 하겠습니다.

module.exports = {

entry : "./index.js",

}

output

output은 빌드시 번들링 된 파일들이 출력되는 곳을 말합니다.

const path = require('path');

module.exports = {

entry : "./index.js",

output : {

path : path.resolve(__dirname + "dist"), // 현 위치에 dist 디렉토리에 위치

filename : "webpack.bundle.js" // 번들링 된 파일 이름

}

}

Tip )

path는 Nodejs에서 제공되는 모듈입니다.

파일이나 디렉토리 관련 주소의 처리에 대해 기능을 제공합니다.

resolve 메서드는 지정된 경로에 대해 절대 경로를 제공합니다.

Loader

제가 웹팩을 설명한 글이나 웹팩의 공식 설명을 보면 Javascript에 대한 번들링을 default로 제공합니다.

즉, 다른 확장자에 대해서는 번들링은 가능하나 따로 추가적인 설정이 필요한데, 해당 파일들을 웹팩으로 읽어주는 역할을 하는 것이 Loader 입니다.

Loader들은 정말 다양하게 존재하며, 자신의 프로젝트 진행에 필요한 로더들을 그에 맞게 세팅해줘야합니다!

당연히 저희는 babel에 대한 로더를 셋업해줄겁니다. 물론 다음시간에... ㅋㅋㅋㅋㅋㅋ ㅜ

당장에는 Loader에 대한 개념만 잡고갑시다!

const path = require('path');

module.exports = {

entry : "./index.js",

output : {

path : path.resolve(__dirname + "dist"), // 현 위치에 dist 디렉토리에 위치

filename : "webpack.bundle.js" // 번들링 된 파일 이름

},

module : {

rules : [

//여기에 여러가지 로더들을 설정해 줍니다.

]

}

}

Plugin

Plugin은 웹팩에서 제공하는 내장 된 additional 기능들을 설정하는 옵션입니다.

플러그인은 아직 잘 사용해보지 못해서 뭐라 못하겠네요 ㅎㅎ;

핫로더 관련 플러그인 등 여러 있습니다.

Mode

모드는 말 그대로 모드인데, development / production / none 의 세가지 옵션이 있습니다.

제가 이해한 것으로는 Mode 설정에 따라 위 플러그인을 자동으로 알맞게 사용합니다.

default 값은 production으로 되어 있습니다.

none으로 설정하게되면 플러그인을  하나도 일체 사용하지 않습니다.

모드에 따른 플러그인 사용은 여기서 한 번 확인해보세요 ㅎㅎ

이상 웹팩 설정에대한 간단한 설명이였습니다.

다음 글에서 babel-loader를 추가해보겠습니다.