«

node.js와 webpack을 이용한 bundle.js 만들기

서론

bundle.js를 만드는 이유는 최적화와 생산성 향상 때문이라고 볼수 있습니다. 그 이외에도 장점들이 몇가지 더 있겠지만 큰 의미에서 본다면 그렇습니다.

설명

폴더를 하나 만들고 그안에서 작업하겠습니다. 그전에 webpack과 node.js는 설치해주세요. 그리고 폴더를 만드셨으면

    $ npm init

을 입력해서 package.js를 생성해줍니다. 폴더구조는 아래와 같습니다.

/현재폴더
- package.js
- index.html
- Parent.js
- Child.js

나머지 파일들도 생성해 줍시다. 생성이 끝났다면 index.html부터 수정해보겠습니다.

    //index.html
    <script src="bundle.js"></script>

index.html을 생성하시고 위의 코드를 삽입해주세요

    //Parent.js
    var Child = require('./Child.js');
    console.log(Child);
    //Child.js
    var Child = 'node.js와 webpack을 이용한 bundle.js 만들기';
    module.exports = Child;

Child.js까지 수정이 끝나셨다면 package.js 수정만 남았습니다. package.js에서 scripts부분을 아래 코드처럼 변경해주세요 test는 안지우셔도 상관없습니다.

    //package.js
    "scripts": {
        "start": "webpack Parent.js bundle.js --progress --watch"
      }

여기까지 끝났다면 필요한 코드수정은 모두 끝났습니다. 터미널에서 아래 코드를 입력해주세요

    $ npm start

package.js에서 –watch 기능을 넣었기때문에 저장을 할때마다 bundle.js에 반영됩니다. 웹페이지에서 테스트하시면 정상적으로 동작하는걸 확인하실 수 있습니다.

https://github.com/radlohead/node_init