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시 ㅠㅠ)
