webpack을 이용한 javascript 모듈관리

안녕하세요 멍개입니다.

javascript로 구현가능 부분이 많아지면서 javascript 코드의 양이 점점 많아지고 있습니다. 코드의 양이 많아질 수록 모듈화를 통해 코드를 관리를 하게 됩니다. javascript언어 자체에서는 모듈 시스템을 지원을 하지 않기 때문에 여러가지 도구를 활용하게 됩니다 그중의 하나가 webpack입니다.

즉, webpack은 javascript 모듈관리 도구입니다.

webpack말고도 commonJS나 AMD(Asynchronous Module Definition)이 있습니다. webpack은 이 두가지의 기능을 모두 지원을 하기때문에 다른 도구보다 많이 사용되고 있습니다.

webpack을 사용하면 어떤식으로 모듈을 관리를 할 수 있는지 알아보겠습니다.

우선 우리는 webpack을 설치를 해야합니다. 하지만 npm이 설치되어 있다면 매우 손쉽게 설치를 할 수 있습니다.

$ npm install -g webpack

로컬환경에서 전역으로 사용하기위해 -g 글로벌 옵션 설정을 해줍니다.

아래와 같이 코드를 작성해줍니다.

// test.js
module.exports = {message: 'webpack'};

object하나를 외부에서 사용 할 수 있도록 하였습니다.

// app.js
console.log(require('./test'));

이제 test모듈을 app에서 사용하기 위해 require을 사용합니다.

이렇게 만든 app은 브라우저에서 직접 실행 할 수 없습니다 webpack을 이용하여 웹브라우저에서 사용할 수 있는 형태로  컴파일을 해주어야 합니다.

컴파일을 하지 않은채 웹 브라우저에서 호출을 해보도록 하겠습니다.

1 2 3 4 5 6 7 8 9 10

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title> </head> <body> <script src="./app.js"></script> </body> </html>

cs

이제 해당 소스를 웹 브라우저로 열어보겠습니다.

웹 브라우저에서는 require을 사용 할 수 없습니다.

$ webpack ./app.js bundle.js

Hash: 3fc5c338f76bfd986a18
Version: webpack 2.2.1
Time: 70ms
    Asset     Size  Chunks             Chunk Names
bundle.js  2.88 kB       0  [emitted]  main
   [0] ./test.js 90 bytes {0} [built]
   [1] ./app.js 83 bytes {0} [built]

$

webpack을 이용하여 app.js를 웹에서 사용 할 수 있는 형태인 bundle.js로 컴파일 완료가 되었습니다.

1 2 3 4 5 6 7 8 9 10

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title> </head> <body> <script src="./bundle.js"></script> </body> </html>

cs

app.js를 호출을 bundle.js로 바꾸어 호출을 해줍니다. 

웹 브라우저를 띄어보면 정상적으로 실행됨을 확인을 하실 수 있습니다.

여기서 app.js을 entry파일이라고 합니다. entry파일은 각종 모듈들을 호출을 하여 여러 모듈에 의존적인 성격을 띄게 될 겁니다. 이러한 모듈의 의존성을 하나의 bundle파일로 만들게 됩니다. 즉 모듈의 의존성을 하나의 파일로 합쳐버리면서 의존성을 없애는 역할을 하기도 합니다. 

추가적으로 node.js와 같은 타 영역에서 사용을 하는 js코드를 사용이 가능해집니다.

근데 여기서 우리는 매우 귀차니즘이 가득한 개발자임을 기억을 해야합니다. 

코드가 바뀔 때마다 bundle.js파일을 만들기 위해 webpack ./app.js bundle.js를 입력하는건 매우 귀찮은 일입니다.

그래서 --watch 옵션을 사용을 합니다.

$ webpack --watch ./app.js bundle.js

Hash: 3fc5c338f76bfd986a18
Version: webpack 2.2.1
Time: 70ms
    Asset     Size  Chunks             Chunk Names
bundle.js  2.88 kB       0  [emitted]  main
   [0] ./test.js 90 bytes {0} [built]
   [1] ./app.js 83 bytes {0} [built]

대기중 

해당 옵션을 사용을 하게되면 프로세스가 완료되지 않고 대기상태로 변환이 됩니다. 코드가 수정이 이루어 지면 자동으로 컴파일을 해주게 됩니다.

해당 소스를 옵저빙하여 코드변경이 이루어지면 자동으로 컴파일이 가능해졌습니다.

이제 엔트리 파일이 하나이상 번들 파일이 하나 이상일 경우 옵션이나 인자를 넘겨야 할게 복잡해 질 것입니다.

이를 해결하기 위해서는 설정파일을 만들어 한번에 작업을 하도록 합니다. 

webpack.config.js파일을 만들어 아래와 같이 코드를 작성을 해주도록 합니다.

//webpack.config.js
module.exports = {
    context: __dirname + '/', // 모듈 파일 폴더
    entry: { // 엔트리 파일 목록
        app: ['./app.js']
    },
    output: {
        path: __dirname + '/dist', // 번들 파일 폴더
        filename: '[name].bundle.js' // 번들 파일 이름 규칙
    }
}

엔트리 파일의 위치를 context에 넣어줍니다. 

엔트리가 될 대상을 entry.app에 리스트로 넣어줍니다

이제 번들파일을 설정해주어야 하는데 생성될 디렉토리 위치 및 파일이름 규칙을 정해줍니다. 

$ webpack 

OR

$ webpack --watch

의 형태로 진행을 하면 됩니다. 

이젠 bundle파일이 webpack.config.js['output']규칙에 맞추어서 생성이 될 겁니다.

웹팩은 다양한 옵션을 설정을 해줄 수 있습니다. 아래에 접속을 하면 다양한 옵션에 대한 설명을 보실 수 있습니다

http://webpack.github.io/docs/configuration.html

디버깅에 대해서 알아보자

많은 웹 개발자는 브라우저의 개발자 도구를 이용하여 디버깅을 하게 될 것입니다.

그런데 webpack을 사용하여 컴파일된 코드를 사용을 하게 될 경우 개발자 도구에서는 컴파일 된 파일만 나타나게 될 것입니다.

webpack.config.js에 

devtool: '#inline-source-map'을 추가를 해줍니다.

//webpack.config.js
module.exports = {
    context: __dirname + '/', // 모듈 파일 폴더
    entry: { // 엔트리 파일 목록
        app: ['./app.js']
    },
    output: {
        path: __dirname + '/dist', // 번들 파일 폴더
        filename: '[name].bundle.js' // 번들 파일 이름 규칙
    },
    devtool: '#inline-source-map',
} 

다시 컴파일을 해주도록 합니다.

좌측을 보면 컴파일을 하기위한 각각의 파일을 직접 확인을 할 수 있습니다.