webpack-dev-server 시작하기

webpack-dev-server는 webpack 빌드를 테스트할때 유용한 http 서버다. 문서에도 간단히 설명되어 있지만 Express의 심플버전이라고 보면 된다. 결과물을 file로 쓰지 않고 메모리에서 빌드해서 테스트해 볼 수 있다.

사용법

먼저 webpack 설정을 다음과 같이 만든다. output.publicPath는 클라이언트가 빌드된 파일에 접근할 수 있도록 서버가 제공할 path이다.

// webpack.config.js

var path = require("path");
module.exports = {
  entry: {
    app: ["./app/main.js"]
  },
  output: {
    path: path.resolve(__dirname, "build"),
    publicPath: "/assets/",
    filename: "bundle.js"
  }
};

결과물이 /assets/bundle.js와 같은 path로 제공되므로 index.html 파일을 아래와 같이 만들어준다. 여기에 필요한 내용을 넣으면 된다.

// build/index.html

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

서버의 구동은 npm으로 webpack-dev-server를 설치한 후 아래와 같이 실행하면 된다. content-base를 build로 설정하면 http://localhost:8080으로 만들어둔 index.html과 빌드된 assets/bundle.js로 접근이 가능하게 된다.

$ webpack-dev-server --content-base build/

production, development mode

dev-server는 development mode로 동작하도록 하고 build는 production mode로 할 수 있도록 몇가지 설정을 한다. 먼저 package.json에 scripts를 추가해 매번 길게 입력하지 않아도 되도록 한다. NODE_ENV를 구분하였다.

// package.json

"scripts": {
    "build": "NODE_ENV=production webpack",
    "start": "NODE_ENV=development webpack-dev-server --content-base ./build"
}

구분된 NODE_ENV를 webpack config 내부에서 사용한다. production mode와 development mode에서의 plugin을 구분하였다.

// webpack.config.js

plugins: process.env.NODE_ENV !== "production"? [] : [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin()
]

마치며

정리를 하면서 이전에 브런치 댓글 작업을 하면서 만든 댓글 샘플 코드에 적용해보았다. webpack으로 빌드를 바꾸면서 CommonJS까지 적용하느라 작업량이 많아졌지만 그래도 적용하길 잘했다 싶다.

이전까지는 급하니까 간단한 http server와 webpack --watch로 해결했는데 이렇게 정리하고 나니 앞으론 급해도 이런 방법을 쓸 수 있을 것 같다.

(벌써 새벽 2시 ㅠㅠ)

반응형