webpack

웹팩 설치및 실행

먼저 webpack 을 설치해야한다.

개발할때만 사용하기 때무에 dev 에 추가 시킨다.

npm install --save-dev webpack

webpack 실행시키면

프로젝트 루트에 있는 webpack.config.js 설장파일을 불러 온다.

설정 파일에는 webpack 실행 시킬 js파일 있으면

실행후 생성되는 파일 위치및 파일이름을 설정한다.

webpack.config.js

module.exports = {
  entry : __dirname + "/app/main.js",
  output : {
    path : __dirname + "/public",
    filename : "bundle.js"
  }

};

main.js

var greeter = require("./Greeter.js");

document.getElementById('root').appendChild(greeter());

Greeter.js

module.exports = function(){
  var greet = document.createElement('div');

  greet.textContent = "hi";
  return greet;


};

파일 생성후 package.json 에서 npm 옵션으로 이것을 실행 시킬것다.

  "scripts": {
    "start": "node_modules/.bin/webpack"
  },

추가후 npm start 실행시키면 webpack.config.js 설정한 output 위치에 파일이 생성 된다.

개발 서버

개발서버를 생성하기 위해서 'npm install -save webpack-dev-server' 추가 설치 해야한다.

npm start 실행하기 위해서 이와 같이 수정을한다.

--progress 옵션은 빌드단계에서 터미널에서 진행줄 표시해준다고 한다.

  "scripts": {
    "start": "node_modules/.bin/webpack-dev-server --progress"
  },

webpack.config.js 에 이와같이 옵션을 추가한다.

  devServer : {
    contentBase : "./public",
    colors : true, //터미널 색상
    historyApiFallback : true,
    inline : true //페이지가 변경되여 새로 고침
  }

npm start 실행하면 bundle.js 파일은 생성은 안되고 localhost:8080 들어가보면 개발서버가 생성된것을 확인 할 수 있다.